Mastering Python Selenium Web Scraping: A detailed guide to perform Web Scraping

Python Selenium Web Scraping: How-To Guide With Examples

Test Strategy vs Test Plan: Key Differences

An application can broadly be divided into two categories: frontend and backend. Before releasing a product in the market, it&#8217;s essential to test whether both the frontend and backend of the application are working correctly. Frontend testing is the testing of the user interface visible to the user by which users interact with the application. In contrast, backend testing is about testing the actual database and server logic under the hood, which is not visible to the application users.
In this article, you will learn about fronted and backend testing and the difference between both tests. You will also learn about the various tools and techniques used in frontend and backend testing.
<div id="toc_container" class="no_bullets">Table Of Contents<ul class="toc_list"><li><a href="#What_is_Frontend_Testing">1 What is Frontend Testing?</a></li><li><a href="#What_are_the_types_of_frontend_testing">2 What are the types of frontend testing</a></li><li><a href="#How_to_Create_a_Frontend_Testing_Plan">3 How to Create a Frontend Testing Plan?</a></li><li><a href="#What_are_some_frontend_Testing_Tools">4 What are some frontend Testing Tools?</a></li><li><a href="#What_is_Back-end_Testing">5 What is Back-end Testing?</a><ul><li><a href="#Backend_testing_types">5.1 Backend testing types</a></li><li><a href="#How_to_Create_the_back_end_testing_plan">5.2 How to Create the back end testing plan?</a></li><li><a href="#What_are_the_backend_Testing_Tools">5.3 What are the backend Testing Tools?</a></li></ul></li><li><a href="#Frontend_Testing_vs_Backend_Testing_8211_Differences">6 Frontend Testing vs Backend Testing &#8211; Differences</a></li><li><a href="#Summary">7 Summary</a></li><li><a href="#FAQ">8 FAQ</a><ul><li><a href="#What_is_the_difference_between_front_end_testing_and_backend_testing">8.1 What is the difference between front end testing and backend testing?</a></li><li><a href="#What_is_backend_testing">8.2 What is backend testing?</a></li><li><a href="#What_is_the_front_end_testing">8.3 What is the front end testing?</a></li></ul></li></ul></div>
<h2 id="bb0sh">What is Frontend Testing?</h2>
The frontend of an application is the visual appearance and user interface that users see and use to interact with the application&#8217;s features and functionality. In the testing life cycle, frontend testing is the process of testing the frontend side of the application to ensure there are no any glitch, functionality breaks, or significant problems present in the application.
A well-driven frontend testing makes your product bug free and ensures the user will get a great user experience.
<figure class="image strchf-type-image regular strchf-size-regular strchf-align-center"><picture><source srcset="https://images.storychief.com/account_36412/frontend-vs-backend-overview_b36361426658e71ee1ef4a1c862511c1_800.jpeg 1x" media="(max-width: 768px)" /><source srcset="https://images.storychief.com/account_36412/frontend-vs-backend-overview_b36361426658e71ee1ef4a1c862511c1_800.jpeg 1x" media="(min-width: 769px)" /><img src="https://images.storychief.com/account_36412/frontend-vs-backend-overview_b36361426658e71ee1ef4a1c862511c1_800.jpeg" /></picture><figcaption>Frontend and backend overview</figcaption></figure>
<h2 id="390qu">What are the types of frontend testing</h2>
In frontend testing, different types of testing methods participate in different layers of testing; for example- unit testing is performed in the initial phase of software development of the life cycle, then component testing and integration testing are done.
That to say, frontend testing of an application involves performing various types of testing on the subject application; some of the frequently performed test types are listed below:
Unit Testing: Unit testing is the process of testing the individual units of software, i.e., a function, module, method, or class, in isolation. It helps to catch the bug issue early in the development and reduces the cost. It also enables code reusability. You can migrate both your code and test into a new project quickly.
Integration Testing: Integration testing is the process of ensuring the integration of two more units and interface links between them are working correctly. For example- testing whether or not I can see my Gmail home page by signing in on the login page of Gmail, here login page and Gmail home page are both individual units, and I am testing their integration.
Regression testing: Regression testing is continuous testing to ensure that newly added functionality is working correctly without affecting other functionality in the application. It helps to ensure that a newly added functionality will not introduce any possible bug issues.
System testing: System testing validates the working of whole integrated software at different layers. It involves the combination of various other tests like usability testing, load testing, software, hardware testing, etc. System testing is black box testing that involves testing the software from the user&#8217;s perspective.
<h2 id="869df">How to Create a Frontend Testing Plan?</h2>
Before creating a frontend testing plan, you should ask why creating a frontend testing plan is essential.
Creating a frontend testing plan is very important at the beginning of your front-end testing journey. During the testing journey, you will have to check various application features and functionality that require writing nested and complex test cases. A frontend testing plan should be made to ensure you create the required test case to cover the application&#8217;s frontend.
A testing plan is nothing but planning at the beginning of your testing cycle. Generally, a testing plan is created per the project requirement, but some actions in the testing plan are everywhere. When creating a frontend test plan, you should remember the following points:
<ul>
<li>Application workflow: Before testing an application, you should understand it and how it works. So, make sure before the testing you use the application yourself and understand the application workflow from the user’s point of view. That will help you create the test cases and write test steps later.</li>
<li>Application users: Nowadays, an application is available across all devices. A user can access an application in a browser by navigating to the URL or can download it as an application. When you know the application user, you can run your test cases test lab by selecting the combinations of devices the user is using.</li>
<li>Create a checklist: After learning about the application workflow and user, create a list of actions you will take during the front end. This checklist will keep you accountable for the test cases you have made and ensure you do not forget them in a rush.</li>
<li>Select your tools: The selection of tools is essential in the testing plan. If you select the wrong tool, the whole software development life cycle will slow down, so be careful when choosing a testing tool for your front-end testing.</li>
</ul>
As we have seen above, selecting a good tool is essential in testing; let’s discuss some of the capable, flexible, and powerful tools in the market that can help with your application frontend testing.
<h2 id="c8g72">What are some frontend Testing Tools?</h2>
There are two types of testing tools: the developer-focused tool, and the low code no code tools that require little or no coding knowledge. If you are not from a developer background or have little understanding of coding, choose no code low code GUI(graphical user interface) based tools for the frontend testing.
There are too many available tools in the market, and I am listing down below some of the best, which are capable and powerful enough automation tools:
<ul>
<li><a href="https://website.testsigma.com/">Testsigma</a>: Testsigma is an open-source and cloud-based AI-driven test automation tool. It provides NLP’s written in plain English to write test steps, or you can also use the test step recorder using the Testsigma extension. The cloud version also supports test labs, and you can run your test cases on various devices by selecting a combination of devices and browsers in the test lab. Testsigma is a no-code test automation tool, meaning, by using it, you can perform end-to-end testing even if you have never written a single line of code.</li>
<li><a href="https://www.selenium.dev/">Selenium</a>: Selenium is an open-source project introduced early in the software testing age. Selenium is an umbrella project providing various tools and libraries which enable browser test automation. Selenium WebDriver is a language-independent protocol that helps to instruct the browser&#8217;s behavior. Selenium also provides an add-on to record the user interaction with the browser named Selenium IDE. Selenium is not a no-code tool; to use Selenium, one requires a developer background.</li>
<li><a href="https://appium.io/">Appium</a>: Appium is an open-source test automation framework used to test native, hybrid, and mobile web apps. Appium uses the same API to write the test cases in test cases on android, ios, and windows, which means you don’t have to write the different test cases for other devices. Using Appium also requires the developer’s background or knowledge of javascript.</li>
<li><a href="https://getopentest.org/">OpenTest</a>: OpenTest is a free and open-source test automation framework for web applications, mobile apps, and APIs. OpenTest is a low-code, no-code tool for scalable and extensible test automation. OpenTest is a feature-rich automation framework focused on enabling modern test automation practices.</li>
<li><a href="http://watir.com/">Watir</a>: Watir stands for web automation testing in ruby; it&#8217;s a lightweight and open-source web automation testing tool. It provides support for various web browsers and elements and advanced interaction functionality with the browser, like, browser certificate, proxies, cookies, etc.</li>
</ul>
<h2 id="8l004">What is Back-end Testing?</h2>
Backend testing is white box testing. It ensures an application&#8217;s database and server-side functionality are working as intended. For example, testing whether a user can log in after signing in will come under the backend testing.
<h3 id="4mvov">Backend testing types</h3>
These are the following types of testing done in the backend testing:
<ul>
<li>Structural testing: Structural testing ensure that all the database elements are mainly responsible for storing the data. Types of Structural testing are: schema testing, table testing, column testing, trigger testing, and database server validation testing.</li>
<li>Functional testing: Functional testing ensures the application functionality works together with the database properly.</li>
<li>Non-functional testing: Non-functional testing measures the stress and load over the database, which helps to optimize database and application performance. Types of non-functional testing are stress testing and load testing.</li>
</ul>
<h3 id="3rr9p">How to Create the back end testing plan?</h3>
A test plan reminds you to run the all-important test operations and ensure you do not forget to run any test. These are some points that you should keep in your mind creating a backend testing plan:
<ul>
<li>Backend language: Unlike the frontend, you will not have any graphical user interface(GUI). That&#8217;s why you should know and understand the language used in the backend to perform any testing.</li>
<li>Database: You should have a level of understanding of the database to perform various testing like schema testing, table, and column testing, trigger testing, etc.</li>
<li>Create a checklist: Create a list of test cases and functionality for which you will write test cases during the testing process of the application backend.</li>
<li>Select your tools: Select a good tool that will ease the overall testing process in the test development life cycle.</li>
</ul>
<h3 id="4loru">What are the backend Testing Tools?</h3>
Tools are abundant in the market, but these are some best ones out there to test your application backend:
Testsigma: Testsigma is an open-source and cloud-based test automation tool; by using it, you can test the front end as well as the back end of your application. You can perform various backend testing like structure, functional, and non-functional testing.
Data Factory: You can use the Data factory to create an automated workflow to perform data-driven test cases using your database as a data source. It provides a programmatic UI for ease of testing.
Data Generator: Using Data Generator, you can generate any data row and schema objects per your backend testing requirement.
TurboData: TurboData helps to generate test data with foreign keys and select, update and delete SQL commands.
<h2 id="96tb6">Frontend Testing vs Backend Testing &#8211; Differences</h2>
The primary difference between Frontend Testing and Backend Testing is that frontend testing checks the user interface of application whereas backend testing checks the database and server side of application.
Here’s a table depicting key differences between frontend testing and backend testing:
<figure class="wp-block-table">
<table style="border: 1px solid black; border-collapse: collapse;">
<tbody>
<tr style="border: 1px solid black; padding: 10px; border-collapse: collapse;">
<td style="border: 1px solid black; padding: 10px; border-collapse: collapse;">Frontend testing</td>
<td style="border: 1px solid black; padding: 10px; border-collapse: collapse;">Backend testing</td>
</tr>
<tr style="border: 1px solid black; padding: 10px; border-collapse: collapse;">
<td style="border: 1px solid black; padding: 10px; border-collapse: collapse;">Frontend testing is about testing the user interface of an application that the user sees and interacts with.</td>
<td style="border: 1px solid black; padding: 10px; border-collapse: collapse;">Backend testing is about testing the database and server side of an application and ensuring that it’s working properly.</td>
</tr>
<tr style="border: 1px solid black; padding: 10px; border-collapse: collapse;">
<td style="border: 1px solid black; padding: 10px; border-collapse: collapse;">Frontend testing is black box testing, meaning the tester will not be able to see the code logic behind the user interface and functionality.</td>
<td style="border: 1px solid black; padding: 10px; border-collapse: collapse;">Backend testing is white-box testing, meaning the tester will interact with the code logic behind any functionality.</td>
</tr>
<tr style="border: 1px solid black; padding: 10px; border-collapse: collapse;">
<td style="border: 1px solid black; padding: 10px; border-collapse: collapse;">Frontend testing doesn’t require any knowledge of programming language.</td>
<td style="border: 1px solid black; padding: 10px; border-collapse: collapse;">Backend testing required knowledge of the database and the language used in the backend.</td>
</tr>
</tbody>
</table>
<h2 id="9ns2c">Summary</h2>
To ensure an application&#8217;s overall functionality of an application, it’s important to test both the backend and frontend sides of an application. Frontend testing ensures that an application&#8217;s overall functionality works as intended in all operating systems and browser combinations. Whereas backed testing ensures the database side of the application is working properly.
<h2 id="7reuq">FAQ</h2>
<h3 id="6mfng">What is the difference between front end testing and backend testing?</h3>
Frontend testing is performed to ensure that the user interface of an application is working as intended. In contrast, backend testing is performed to ensure that the database side of the application is working correctly.
<h3 id="iks9">What is backend testing?</h3>
Backend testing is white box testing, meaning code logic is visible to the tester in this testing. It is performed to ensure that an application&#8217;s database and server-side functionality is working correctly. Backend testing requires knowledge of coding and database.
<h3 id="durcv">What is the front end testing?</h3>
Frontend testing is black box testing, meaning the tester will not be able to look into the code logic behind the user interface. It is performed to ensure that an application is working correctly in all combinations of operating systems and browsers. Frontend testing doesn’t require any knowledge of coding.
<script>if(window.strchfSettings === undefined) window.strchfSettings = {};window.strchfSettings.stats = {url: "https://testsigma-inc.storychief.io/en/fronted-testing-vs-backend-testing?id=1898124548&type=2",title: "Frontend Testing vs Backend Testing: What&#039;s the Difference?",id: "317deb0e-2dfc-41d7-bd18-f35979707693"};(function(d, s, id) {var js, sjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {window.strchf.update(); return;}js = d.createElement(s); js.id = id;js.src = "https://d37oebn0w9ir6a.cloudfront.net/scripts/v0/strchf.js";js.async = true;sjs.parentNode.insertBefore(js, sjs);}(document, 'script', 'storychief-jssdk'))</script></figure>

Frontend Testing vs Backend Testing: What’s the Difference?

How to report an issue using a bug report template? cover

Bug Report Template | A Step-by-Step Guide to Reporting Issues in Software

Data is the new asset for any business use case for drawing insights. Similarly, Automation Testing is the new standard that tech companies set for testing their software products.



XPath plays a vital role in any of the uses above, in scraping data from multiple websites or testing products and functionality. XPath allows testers like us to navigate around various locators of the web page with the help of numerous properties such as ID, Tag Name, Group Index, and Predicates.



This blog post walks you through various examples of XPath locators and their definitions.



We have shown the Java implementation of the XPath locator in our cheat sheet for Selenium locators. Let&#8217;s begin with this comprehensive XPath cheat sheet, which will be quite helpful while performing <a href="https://website.testsigma.com/automated-testing">automated testing</a> or scraping data through Selenium.



<div id="toc_container" class="no_bullets">Table Of Contents<ul class="toc_list"><li><a href="#What_is_XPath">1 What is XPath?</a></li><li><a href="#The_XPath_Syntax">2 The XPath Syntax</a></li><li><a href="#Different_types_of_XPath_in_Selenium">3 Different types of XPath in Selenium</a><ul><li><a href="#Absolute_XPath">3.1 Absolute XPath</a></li><li><a href="#Relative_XPath">3.2 Relative XPath</a></li></ul></li><li><a href="#XPath_Expressions_in_Selenium">4 XPath Expressions in Selenium</a></li><li><a href="#XPath_Selectors_in_Selenium">5 XPath Selectors in Selenium</a><ul><li><a href="#Descendant_Selectors">5.1 Descendant Selectors</a></li><li><a href="#Attribute_selectors">5.2 Attribute selectors</a></li></ul></li><li><a href="#Axes_in_XPath">6 Axes in XPath</a></li><li><a href="#Functions_in_XPath">7 Functions in XPath</a></li><li><a href="#Operators_in_XPath">8 Operators in XPath</a></li><li><a href="#Browser_console_to_locate_XPath">9 Browser console to locate XPath</a></li><li><a href="#Wrapping_Up">10 Wrapping Up</a></li><li><a href="#Frequently_Asked_Questions">11 Frequently Asked Questions:</a><ul><li><a href="#What_is_the_easiest_way_to_find_XPath">11.1 What is the easiest way to find XPath?</a></li><li><a href="#Which_XPath_is_faster_in_Selenium">11.2 Which XPath is faster in Selenium?</a></li><li><a href="#Which_XPath_is_best">11.3 Which XPath is best?</a></li></ul></li></ul></div>
<h2 id="a9l6r">What is XPath?</h2>



XPath is the path of elements on the HTML tree. XPath allows us to use different selectors on the HTML page.



We represent the current webpage in XPath by using(.) and (/) to represent child elements to navigate through different elements in HTML and XML documents.



<h2 id="an6t2">The XPath Syntax</h2>



Since we’ve discussed XPath, let’s check how we can generate XPath. The example below shows XPath syntax with single and multiple attributes.



XPath Syntax for Single Attribute



<pre class="wp-block-preformatted">//tag[@AttributeName = ‘Attribute Value’]</pre>



XPath Syntax for Multiple Attributes



<pre class="wp-block-preformatted">//tag[@AttributeName1=’Attribute Value’ and @AttributeName2=’AttributeValue2’]</pre>



<pre class="wp-block-preformatted">//tag[@AttributeName1=’Attribute Value’ or @AttributeName2=’AttributeValue2’]</pre>



<h2 id="5jra6">Different types of XPath in Selenium</h2>



XPath allows us to navigate through the webpage in two different types:



<ol type="1"><li>Absolute XPath</li><li>Relative XPath</li></ol>



<h3 id="ah60n">Absolute XPath</h3>



This locator uses the whole expression from the parent tag and starts with a single tag representing child elements.



<figure class="wp-block-image"><img src="https://images.storychief.com/account_36412/image21_f18e3ccf352df315c83ba66d2d308d79_800.jpeg" alt=""/><figcaption>Absolute XPath</figcaption></figure>



Below attached is one more example of using a selector with multiple divisions. In such cases, we can use the index in the path. We define the array index inside the bracket according to the node position.



Example:



<figure class="wp-block-image"><img src="https://images.storychief.com/account_36412/image41_683ed70a11a138af40f1613fc6159b9e_800.png" alt=""/><figcaption>Absolute XPath</figcaption></figure>



<h3 id="cgcr0">Relative XPath</h3>



Relative XPath can start from anywhere from the HTML structure. We use Relative XPath when we don’t want to write the complete XPath expression from the root node.



The Relative XPath starts from a double forward slash, whereas the Absolute XPath starts from a single slash.



Example:



In the below example, we are choosing the image selector. Unlike Absolute XPath, we need not start from HTML.



<figure class="wp-block-image"><img src="https://images.storychief.com/account_36412/image51_a4abbc3843692c896c7e258429f40666_800.jpeg" alt=""/><figcaption>Relative XPath</figcaption></figure>



<h2 id="3v3qt">XPath Expressions in Selenium</h2>



XPath expressions navigate and select appropriate elements in HTML and XML documents.



<figure class="wp-block-table"><table style="border: 1px solid black;border-collapse: collapse;"><tbody><tr style="border: 1px solid black; padding: 10px;
 border-collapse: collapse;"><td style="border: 1px solid black; padding: 10px;
 border-collapse: collapse;">Symbol</td><td style="border: 1px solid black; padding: 10px;
 border-collapse: collapse;">Definition</td></tr><tr style="border: 1px solid black; padding: 10px;
 border-collapse: collapse;"><td style="border: 1px solid black; padding: 10px;
 border-collapse: collapse;">/</td><td style="border: 1px solid black; padding: 10px;
 border-collapse: collapse;">The single forward slash is used for selecting the child element,to create absolute XPath, to select elements from the root node, and to traverse through child elements from the parent node.</td></tr><tr style="border: 1px solid black; padding: 10px;
 border-collapse: collapse;"><td style="border: 1px solid black; padding: 10px;
 border-collapse: collapse;">//</td><td style="border: 1px solid black; padding: 10px;
 border-collapse: collapse;">The double forward slash symbol is used for the descendant child(child,grandchild,etc.)in relative paths to select any elements present in the document.</td></tr><tr style="border: 1px solid black; padding: 10px;
 border-collapse: collapse;"><td style="border: 1px solid black; padding: 10px;
 border-collapse: collapse;">.</td><td style="border: 1px solid black; padding: 10px;
 border-collapse: collapse;">The single dot selects the current node.</td></tr><tr style="border: 1px solid black; padding: 10px;
 border-collapse: collapse;"><td style="border: 1px solid black; padding: 10px;
 border-collapse: collapse;">@</td><td style="border: 1px solid black; padding: 10px;
 border-collapse: collapse;">Select attributes</td></tr><tr style="border: 1px solid black; padding: 10px;
 border-collapse: collapse;"><td style="border: 1px solid black; padding: 10px;
 border-collapse: collapse;">//a/..</td><td style="border: 1px solid black; padding: 10px;
 border-collapse: collapse;">Backward traversing is where we use (.) dot notations to go up the tree or reach the parent node.The expression attached will get the parent element of the anchor tag.</td></tr></tbody></table></figure>



<h2 id="2uro4">XPath Selectors in Selenium</h2>



XPath selectors allow us to select a specific part of HTML documents.



<h3 id="geni">Descendant Selectors</h3>



To select child elements of the current parent node, Descendant selectors are used. We use a double forward slash or single forward slash to select the child or grand-child elements in the HTML.



The Syntax for Descendant selectors:



<pre class="wp-block-preformatted">/tag or //tag</pre>



<h3 id="61apm">Attribute selectors</h3>



Attribute selectors are used for elements based on the attribute present in a single HTML node.



The Syntax for Attribute selectors:



<pre class="wp-block-preformatted">//tag[@AttibuteName= ‘Attribute Value”]</pre>



XPath by Group Index



XPath by Group Index is used to match a single element. We write the index inside the bracket and the elements outside the block element.



It executes the XPath inside the brackets and stores the matching elements in the XPath array. Then, it will identify the elements based on the index from the elements mentioned outside the bracket.



Example: If we follow the XPath by Group index, we can get a single result of our Choice.



<figure class="wp-block-image"><img src="https://images.storychief.com/account_36412/image11_371c5e1a0c201202c5190835f8a81db5_800.jpg" alt=""/></figure>



<h2 id="3tsg7">Axes in XPath</h2>



Axes represent the relationship between the current element and its relative element. It could be anything, such as a child or sibling, parent nodes etc.



<figure class="wp-block-image"><img src="https://images.storychief.com/account_36412/AttributeSelectors_e6a2e96fcf9ba933ef65e84902ea3668_800.png" alt=""/><figcaption>Axes in XPath</figcaption></figure>



<h2 id="cnc5">Functions in XPath</h2>



A set of operations can be used for making Functions in XPath. It could be adding two HTML or getting the count of images present in a webpage.



Node Functions



XPath has several node functions such as name(), text(), position(), last(), comment() and name(). This Function provides the name of the HTML node.



<pre class="wp-block-preformatted">Xpath=//[starts-with(name(), ‘h’)]</pre>



text()



This function is used to locate the HTML elements based on the text of the web element.



<pre class="wp-block-preformatted">Xpath=//td[text()='login']</pre>



comment()



This function selects the elements with comments.



<pre class="wp-block-preformatted">/span/comment()</pre>



last()



This function selects the last element in the current Node.



<pre class="wp-block-preformatted">/span/img[last()]</pre>



position()



This function provides the position of the element.



<pre class="wp-block-preformatted">Ex: (//a)[position() ≤= n]</pre>



<h2 id="cuhf3">Operators in XPath</h2>



We can use operators combined with XPath to check certain conditions and verify requirements. It behaves like the if-else condition. XPath predicates come in square brackets after the parent elements are tested. With the following attached XML below, we’ve provided different examples for the operator:



<ul><li>Greater than(&gt;)</li><li>Less than(&lt;)</li><li>OR operator ( OR )</li><li>AND operator ( AND )</li><li>Not Equal to ( != )</li><li>Equal to ( = )</li></ul>



<pre class="wp-block-preformatted">&lt;eCommerce&gt; &lt;mobile&gt; &lt;Iphone supplier="mother" id="1"&gt; &lt;year&gt;2020&lt;/year&gt; &lt;amount&gt;1000&lt;/amount&gt; &lt;store&gt;ABC&lt;/store&gt; &lt;/Iphone&gt; &lt;Samsung supplier="store" id="2"&gt; &lt;year&gt;2018&lt;/year&gt; &lt;amount&gt;700&lt;/amount&gt; &lt;amount&gt;700&lt;/amount&gt; &lt;store&gt;XYZ&lt;/store&gt; &lt;/Samsung&gt; &lt;/mobile&gt; &lt;/eCommerce&gt;</pre>



Less than operator ( &lt; )



We can use this operator with XPath to check if the result is less than the number



Example:



<pre class="wp-block-preformatted">eCommerce/mobile/iphone[year &lt; 2019]</pre>



Result: In this expression, all the phones are listed with a year Lesser than 2019.



Greater than operator ( &gt; )



We can use this operator with XPath to check if the result is greater than a number.



Example:



<pre class="wp-block-preformatted">eCommerce/mobile/iphone[year &gt; 2019]</pre>



Result: In this expression, all the phones are listed with a year greater than 2019.



Equal to operator ( = )



We can use this operator for comparing or checking if the value is equal to the expected value.



Example:



<pre class="wp-block-preformatted">eCommerce//[@store=’ABC’]</pre>



Result: In this expression, all the stores with the name ABC are listed. Thus, the result will be an iPhone.



Not Equal to operator ( != )



We can use this operator to check if the operator is not equal to the expected value



Example:



<pre class="wp-block-preformatted">eCommerce//[@store!=’ABC’]</pre>



Result: In this, we will have all stores not named ABC. The result will be Samsung.



AND operator ( and )



We use this operator in cases where we want both conditions to be true.



<pre class="wp-block-preformatted">eCommerce//[@store=’ABC and @store=’XYZ’’]</pre>



OR operator ( or )



We use this operator in cases where we want any one of the conditions to be true.



<pre class="wp-block-preformatted">eCommerce//[@store=’ABC or @store=’XYZ’’]</pre>



<pre class="wp-block-preformatted">//input[@value=’A’ or @value=’B’]</pre>



<h2 id="eamk2">Browser console to locate XPath</h2>



We can test our XPath in browsers before checking it programmatically. With the help of debugging tools such as a console, we can test our XPath in the console.



We can write our XPath or with help of an inspector, we can get the XPath of any element on the webpage.



To validate XPath programmatically, follow these steps:



<ol type="1"><li>Visit any website (for example, Testsigma) and press F12 on the keyboard.</li><li>Click on the console as shown in the image below.</li><li>$x(&#8220;//img[@class=&#8217;img-responsive&#8217;]/@src&#8221;)</li><li>Entering the above XPath, we can select the Testsigma logo element on the left top corner as shown in the below image.</li></ol>



<figure class="wp-block-image"><img src="https://images.storychief.com/account_36412/Testigma_72645294d8e4483227a806635149da97_800.png" alt=""/></figure>



Validating XPath with help of inspector XPath:



<ol type="1"><li>Visit any website and press F12 on the keyboard.</li><li>Click on Elements and right click element of your choice</li><li>Hover the cursor over Copy and select Copy full XPath.</li></ol>



Once done we can place the copied XPath inside the $x(`place your XPath copied from elements`) and check your results.



<h2 id="bfbuv">Wrapping Up</h2>



XPath is used to select or find elements on a webpage. We can use XPath in combination with other programming languages as well.



XPath allows us to navigate through the webpage in two different types:



<ol type="1"><li>Absolute XPath.</li><li>Relative XPath.</li></ol>



Relative XPath is more reliable and efficient while testing or scrapping a webpage. Since it supports dynamic operations, we can continue to extract data or automate tasks using the same code, even if the website is updated.



<h2 id="ffu0t">Frequently Asked Questions:</h2>



<h3 id="64mh2">What is the easiest way to find XPath?</h3>



The easiest way to find XPath is by using browser developer tools. Follow the below steps to generate XPath quickly.



<ol type="1"><li>Right-click on the element of your choice and select inspect; this will launch the inspector tool for elements HTML code.</li><li>Copy the XPath by right-clicking the HTML element.</li><li>Test the copied XPath to locate the same element in Chrome.</li></ol>



<h3 id="6bbqu">Which XPath is faster in Selenium?</h3>



The Relative XPath is faster in Selenium than the Absolute XPath. Absolute XPath is slow because it starts from the root node. Relative XPath is faster and most preferred because it starts from the middle of the HTML structure.



<h3 id="dek6t">Which XPath is best?</h3>



Relative XPath is best in major scenarios as there&#8217;s minimum code maintenance required if there&#8217;s any update on the website.



<script>if(window.strchfSettings === undefined) window.strchfSettings = {};window.strchfSettings.stats = {url: "https://testsigma-inc.storychief.io/en/xpath-locators-cheat-sheet?id=2055130390&type=2",title: "Quick XPath Locators Cheat Sheet",id: "317deb0e-2dfc-41d7-bd18-f35979707693"};(function(d, s, id) {var js, sjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {window.strchf.update(); return;}js = d.createElement(s); js.id = id;js.src = "https://d37oebn0w9ir6a.cloudfront.net/scripts/v0/strchf.js";js.async = true;sjs.parentNode.insertBefore(js, sjs);}(document, 'script', 'storychief-jssdk'))</script>

Quick XPath Locators Cheat Sheet

How to automate your web testing on real mobile and desktop browsers

Wait a second...Did you try Testsigma?

Wait a second...
Did you try Testsigma?