| ☰ See All Chapters |
Selectors in Puppeteer
To create puppeteer test case we need to provide the target either it is web page or an element (Text field, Check Boxes, Select drop down, Buttons etc.) in the web page. To locate the target we have to identify the property which is unique to the target. This property should be unique from all the html code which has been rendered. Using this unique property we can create test step to locate the element. While identifying the unique property we can consider any attribute of the html tag, or we can frame combination of attributes of the html tag, but final it should be unique from the all html code in the current page.
Most of the time developers attach the id attribute and which will be unique to the page. If id attribute is not present we can consider name or class.
When name/id/class attribute is not available we have to use unique attribute attached only with that tag or combination of attributes and values to get the unique identification. In this case we have to use xpath syntax.
To identify the unique identification property we can use browser developer tool to inspect the element. Right click on the element and select Inspect Element from the browser.
Puppeteer provides .$, .$$, .$x methods in Page and ElementHandle classes. These methods take selector/xpath expression to get the ElementHandle instances representing element from the HTML dom. These expressions are simply called as selectors or locators.
Method | Description |
.$(selectorExpression) | Returns a Promise with ElementHandle. ElementHandle is an instance of located element. If selectorExpression matches multiple elemenets then first matching element will be returned. |
.$$(selectorExpression) | Returns a Promise with array of ElementHandle. In this case if selectorExpression matches with multiple elements, then all those elements will be returned in an array. |
.$x(xPathExpression) | Returns a Promise with array of ElementHandle. In this case if xpathExpression matches with multiple elements, then all those elements will be returned in an array. If xpathExpression matches only one element the array will have only one element. |
We have 5 types of selectors in puppeteer using which we can locate the target
Type selector
Class selector
ID selector
Attribute selector
xpath selector
To learn and understand selector, below is key basics of HTM you should learn.
In HTML language we have only tags. A tag opened must be closed. For example <head>………………….</head>
Syntax: <tagname attribute="value" attribute="value" attribute="value"> </tagname>
Tags can be nested (tag inside tag), however they must be opened and closed in order.
Tags may/may not have attributes.
Attributes may/may not have values.
Values are written inside double quotes/single quotes.
tagname, attribute names are defined by html language can be random.
- value defined by developers and can be anything defined by developers.
All Chapters
