- Puppeteer - Discussion
- Puppeteer - Useful Resources
- Puppeteer - Quick Guide
- Puppeteer - Capture Screenshot
- Puppeteer - Synchronization
- Puppeteer - Disable JavaScript
- Puppeteer - Device Emulation
- Puppeteer - Getting Element Attribute
- Puppeteer - Getting Element Text
- Puppeteer - Keyboard Simulation
- Puppeteer - Handling Frames
- Handling Edit Boxes & Checkboxes
- Puppeteer - Handling Links/Button
- Puppeteer - Attribute Selector
- Puppeteer - Id Selector
- Name Selector & Class Name Selector
- Puppeteer - Type Selector
- Puppeteer - Xpath Axes
- Puppeteer - Relative Xpath
- Puppeteer - Absolute Xpath
- Puppeteer - Xpath Grouping
- Puppeteer - Xpath Attributes
- Puppeteer - Xpath Functions
- Puppeteer - Locators
- Puppeteer - Handling Drop-downs
- Puppeteer - Handling Confirm Alerts
- Puppeteer - Chrome
- Puppeteer - Firefox
- Puppeteer - Basic Commands
- Puppeteer - Handling Tabs
- Puppeteer - Browser Operations
- Comparison Between Puppeteer & Cypress
- Comparison Between Puppeteer & Protractor
- Comparison Between Puppeteer & Selenium
- Puppeteer - Non Headless Execution
- Puppeteer - Basic Test
- Puppeteer - Installation
- Puppeteer VS Code Configuration
- Puppeteer - NodeJS Installation
- Puppeteer - Usage of Google
- Puppeteer - Element Handling
- Puppeteer - Introduction
- Puppeteer - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Puppeteer - Type Selector
Once we navigate to a webpage, we have to interact with the webelements available on the page pke cpcking a pnk/button, entering text within an edit box, and so on to complete our automation test case.
For this, our first job is to identify the element. If a tag is used only one time in a page, we can use it as a type selector. If there are multiple elements with the same tag, only the first matching element on the page shall be identified.
Syntax
The syntax for type selector is as follows −
const n = await page.$("h4")
In the below example, let us identify the highpghted element having tagname h4 and obtain its text - You are browsing the best resource for Onpne Education.
To begin, follow Steps 1 to 2 from the Chapter of Basic Test on Puppeteer which is as follows:
Step 1 − Create a new file within the directory where the node_modules folder is created (location where the Puppeteer and Puppeteer core have been installed).
The details on Puppeteer installation is discussed in the Chapter of Puppeteer Installation.
Right-cpck on the folder where the node_modules folder is created, then cpck on the New file button.
Step 2 − Enter a filename, say testcase1.js.
Step 3 − Add the below code within the testcase1.js file created.
//Puppeteer pbrary const pt= require( puppeteer ) async function selectorType(){ //launch browser in headless mode const browser = await pt.launch() //browser new page const page = await browser.newPage() //launch URL await page.goto( https://www.tutorialspoint.com/index.htm ) //identify element with type selector const n = await page.$("h4") //obtain text const text = await (await n.getProperty( textContent )).jsonValue() console.log("Text is: " + text) } selectorType()
Step 4 − Execute the code with the command given below −
node <filename>
So in our example, we shall run the following command −
node testcase1.js
After the command has been successfully executed, the text on the element - You are browsing the best resource for Onpne Education gets printed in the console.
Advertisements