urlscan.io logo urlscan.io
SecurityTrails logo

www.tools4testing.com Open in urlscan Pro
162.241.27.126  Public Scan

Back to summary
URL: https://www.tools4testing.com/contents/puppeteer/selectors-in-puppeteer
Submission: On May 24 via api from US — Scanned from DE

Form analysis 1 forms found in the DOM

<form class="gsc-search-box gsc-search-box-tools" accept-charset="utf-8">
  <table cellspacing="0" cellpadding="0" role="presentation" class="gsc-search-box">
    <tbody>
      <tr>
        <td class="gsc-input">
          <div class="gsc-input-box" id="gsc-iw-id1">
            <table cellspacing="0" cellpadding="0" role="presentation" id="gs_id50" class="gstl_50 gsc-input" style="width: 100%; padding: 0px;">
              <tbody>
                <tr>
                  <td id="gs_tti50" class="gsib_a"><input autocomplete="off" type="text" size="10" class="gsc-input" name="search" title="search" aria-label="search" id="gsc-i-id1" dir="ltr" spellcheck="false"
                      style="width: 100%; padding: 0px; border: none; margin: 0px; height: auto; background: url(&quot;https://www.google.com/cse/static/images/1x/en/branding.png&quot;) left center no-repeat rgb(255, 255, 255); outline: none;"></td>
                  <td class="gsib_b">
                    <div class="gsst_b" id="gs_st50" dir="ltr"><a class="gsst_a" href="javascript:void(0)" title="Clear search box" role="button" style="display: none;"><span class="gscb_a" id="gs_cb50" aria-hidden="true">×</span></a></div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </td>
        <td class="gsc-search-button"><button class="gsc-search-button gsc-search-button-v2"><svg width="13" height="13" viewBox="0 0 13 13">
              <title>search</title>
              <path
                d="m4.8495 7.8226c0.82666 0 1.5262-0.29146 2.0985-0.87438 0.57232-0.58292 0.86378-1.2877 0.87438-2.1144 0.010599-0.82666-0.28086-1.5262-0.87438-2.0985-0.59352-0.57232-1.293-0.86378-2.0985-0.87438-0.8055-0.010599-1.5103 0.28086-2.1144 0.87438-0.60414 0.59352-0.8956 1.293-0.87438 2.0985 0.021197 0.8055 0.31266 1.5103 0.87438 2.1144 0.56172 0.60414 1.2665 0.8956 2.1144 0.87438zm4.4695 0.2115 3.681 3.6819-1.259 1.284-3.6817-3.7 0.0019784-0.69479-0.090043-0.098846c-0.87973 0.76087-1.92 1.1413-3.1207 1.1413-1.3553 0-2.5025-0.46363-3.4417-1.3909s-1.4088-2.0686-1.4088-3.4239c0-1.3553 0.4696-2.4966 1.4088-3.4239 0.9392-0.92727 2.0864-1.3969 3.4417-1.4088 1.3553-0.011889 2.4906 0.45771 3.406 1.4088 0.9154 0.95107 1.379 2.0924 1.3909 3.4239 0 1.2126-0.38043 2.2588-1.1413 3.1385l0.098834 0.090049z">
              </path>
            </svg></button></td>
        <td class="gsc-clear-button">
          <div class="gsc-clear-button" title="clear results">&nbsp;</div>
        </td>
      </tr>
    </tbody>
  </table>
</form>

Text Content

×

search
 

Custom Search

Sort by:
Relevance

Relevance
Date




      



Home Selenium Selenium IDE Puppeteer Cucumber Gherkin Karate XPATH Selenium
WebDriver Java TypeScript Register/Login ☰


 * Puppeteer Tutorial
   * » Puppeteer Tutorial
   * » Puppeteer Installation
 * Puppeteer Examples
   * » Puppeteer Example
   * » Non Headless Example
   * » Example Using Typescript
 * Puppeteer API
   * » Puppeteer Api
   * » Puppeteer Class
   * » Puppeteer Browser
   * » Puppeteer Page
   * » Puppeteer Elementhandle
 * Puppeteer Selectors
   * » Selectors In Puppeteer
   * » Type Selector In Puppeteer
   * » Class Selector In Puppeteer
   * » Id Selector In Puppeteer
   * » Attribute Selector In Puppe...
 * Puppeteer Xpath
   * » Xpath In Puppeteer
   * » Absolute Xpath In Puppeteer
   * » Relative Xpath In Puppeteer
   * » Xpath By Attribute
   * » Xpath Using Text Function
   * » Xpath Using Contains Functi...
   * » Xpath Using Starts With Fun...
   * » Independent And Dependent C...
   * » Group Index In Xpath
   * » Xpath Axes
 * Handling Input Elements
   * » Handling Editboxes
   * » Handling Dropdown
   * » Handling Radio Button
   * » Handling Checkbox
 * Handling Dialogs
   * » Javascript Alert Handling I...
   * » Javascript Confirm Handling...
   * » Javascript Prompt Handling ...
 * Synchronization
   * » Puppeteer Wait Methods
   * » Puppeteer waitForSelector
   * » Puppeteer waitForXPath
   * » Puppeteer waitForFunction
   * » Puppeteer waitFor




×
 * Puppeteer Tutorial
   * » Puppeteer Tutorial
   * » Puppeteer Installation
 * Puppeteer Examples
   * » Puppeteer Example
   * » Non Headless Example
   * » Example Using Typescript
 * Puppeteer API
   * » Puppeteer Api
   * » Puppeteer Class
   * » Puppeteer Browser
   * » Puppeteer Page
   * » Puppeteer Elementhandle
 * Puppeteer Selectors
   * » Selectors In Puppeteer
   * » Type Selector In Puppeteer
   * » Class Selector In Puppeteer
   * » Id Selector In Puppeteer
   * » Attribute Selector In Puppeteer
 * Puppeteer Xpath
   * » Xpath In Puppeteer
   * » Absolute Xpath In Puppeteer
   * » Relative Xpath In Puppeteer
   * » Xpath By Attribute
   * » Xpath Using Text Function
   * » Xpath Using Contains Function
   * » Xpath Using Starts With Function
   * » Independent And Dependent Concept In Xpath
   * » Group Index In Xpath
   * » Xpath Axes
 * Handling Input Elements
   * » Handling Editboxes
   * » Handling Dropdown
   * » Handling Radio Button
   * » Handling Checkbox
 * Handling Dialogs
   * » Javascript Alert Handling In Puppeteer
   * » Javascript Confirm Handling In Puppeteer
   * » Javascript Prompt Handling In Puppeteer
 * Synchronization
   * » Puppeteer Wait Methods
   * » Puppeteer waitForSelector
   * » Puppeteer waitForXPath
   * » Puppeteer waitForFunction
   * » Puppeteer waitFor

☰ See All Chapters





← Previous - Puppeteer ElementhandleNext - Type Selector In Puppeteer →



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

 1. Type selector 

 2. Class selector 

 3. ID selector 

 4. Attribute selector 

 5. xpath selector 

To learn and understand selector, below is key basics of HTM you should learn.

 1. 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>

 1. Tags can be nested (tag inside tag), however they must be opened and
    closed in order. 

 2. Tags may/may not have attributes. 

 3. Attributes may/may not have values.  

 4. Values are written inside double quotes/single quotes. 

 5. tagname, attribute names are defined by html language can be random. 

 6. value defined by developers and can be anything defined by developers. 

 

← Previous - Puppeteer ElementhandleNext - Type Selector In Puppeteer →


--------------------------------------------------------------------------------

All Chapters
 * Puppeteer Tutorial
   * » Puppeteer Tutorial
   * » Puppeteer Installation
 * Puppeteer Examples
   * » Puppeteer Example
   * » Non Headless Example
   * » Example Using Typescript
 * Puppeteer API
   * » Puppeteer Api
   * » Puppeteer Class
   * » Puppeteer Browser
   * » Puppeteer Page
   * » Puppeteer Elementhandle
 * Puppeteer Selectors
   * » Selectors In Puppeteer
   * » Type Selector In Puppeteer
   * » Class Selector In Puppeteer
   * » Id Selector In Puppeteer
   * » Attribute Selector In Puppeteer
 * Puppeteer Xpath
   * » Xpath In Puppeteer
   * » Absolute Xpath In Puppeteer
   * » Relative Xpath In Puppeteer
   * » Xpath By Attribute
   * » Xpath Using Text Function
   * » Xpath Using Contains Function
   * » Xpath Using Starts With Function
   * » Independent And Dependent Concept In Xpath
   * » Group Index In Xpath
   * » Xpath Axes
 * Handling Input Elements
   * » Handling Editboxes
   * » Handling Dropdown
   * » Handling Radio Button
   * » Handling Checkbox
 * Handling Dialogs
   * » Javascript Alert Handling In Puppeteer
   * » Javascript Confirm Handling In Puppeteer
   * » Javascript Prompt Handling In Puppeteer
 * Synchronization
   * » Puppeteer Wait Methods
   * » Puppeteer waitForSelector
   * » Puppeteer waitForXPath
   * » Puppeteer waitForFunction
   * » Puppeteer waitFor

By Manu Manjunatha

Dear Reader, I created this site to help students and professionals learn
software testing tools. I am committed to provide easy and detailed tutorials. I
hope you see all that reflected in the tutorials. I am happy to hear your
comments and get your feedback on how I am doing. Some errors may have
accidentally crept in the tutorials despite my hard work. Please send me your
valuable feedback from here Contact Us .
Follow the fun here:    









      



Home | About Us | Contact us



© Copyright 2019-2020 www.tools4testing.com

Contents developed and owned by Manu Manjunatha, No part of this website may be
reproduced.




Go to Top

Write and Publish a Tutorial! Close


WRITE AND PUBLISH A TUTORIAL!

Do you have good notes or papers written by you and seeking for a platform to
publish? We provide the platform to publish your tutorials in your name. If you
wish to publish your tutorial in your name to help the readers, Please contact
us by sending an email to publish@tools4testing.com or publish@java4coding.com
The main way that others learn about your work is through your published
tutorials. If you don’t publish, it will be as if you never did the work. Your
notes can help the readers only when you share it.

Close