Playwright Select First or Last Element

In Playwright, you can select the first and last element from the list of elements using several ways. Let's discuss some of them in this article.

Table of Contents

  1. Demo Website
  2. First Element using first method
  3. First Element using Nth Method
  4. First Element using Nth Selector with CSS
  5. First Element using Nth Selector with XPath
  6. First Element using CSS Selector
  7. First Element using XPath Selector
  8. Last Element using last method
  9. Last Element using Nth Method
  10. Last Element using Nth Selector and CSS
  11. Last Element using Nth Selector and XPath
  12. Last Element using CSS Selector
  13. Last Element using XPath Selector
  14. Video Tutorial

1. Demo Website

For Demo Let's first element About Us and Last element Terms of Use from ProgramsBuzz footer section.

Playwright Find First and Last Element

2. Find First Element using first method

Use first() method of playwright.

await page.locator("div.region-footer-bottom-second ul.menu>li").first().click()

3. Find First Element using Nth Method

Use nth() method of playwright with index 0.

await page.locator("div.region-footer-bottom-second ul.menu>li").nth(0).click()

4. Find First Element using Nth Selector with CSS

Find the CSS selector for set of elements and use >>nth=0 just after selector in locator method.

await page.locator("div.region-footer-bottom-second ul.menu>li>>nth=0").click()

5. Find First Element using Nth Selector with XPath

Find the XPath selector for set of elements and use >>nth=0 just after selector in locator method.

await page.locator("//div[contains(@class,'region-footer-bottom-second')]//ul[@class='menu']/li>>nth=0").click()

6. Find First Element using CSS Selector

You can use css first-of-type pseudo-class

await page.locator("div.region-footer-bottom-second ul.menu>li:first-of-type").click()

7. Find First Element using XPath Selector

Surround set of elements selector with round brackets () and use index 1 in square brackets [].

await page.locator("(//div[contains(@class,'region-footer-bottom-second')]//ul[@class='menu']/li)[1]").click()

8. Find Last Element using last method

Use last() method of playwright.

await page.locator("div.region-footer-bottom-second ul.menu>li").last().click()

9. Find Last Element using Nth Method

Use nth() method of playwright with index -1.

await page.locator("div.region-footer-bottom-second ul.menu>li").nth(-1).click()

10. Find Last Element using Nth Selector and CSS

Find the CSS selector for set of elements and use >>nth=-1 just after selector in locator method.

await page.locator("div.region-footer-bottom-second ul.menu>li>>nth=-1").click()

11. Find Last Element using Nth Selector and XPath

Find the XPath selector for set of elements and use >>nth=-1 just after selector in locator method.

await page.locator("//div[contains(@class,'region-footer-bottom-second')]//ul[@class='menu']/li>>nth=-1").click()

12. Find Last Element using CSS Selector

You can use css last-of-type pseudo-class.

await page.locator("div.region-footer-bottom-second ul.menu>li:last-of-type").click()

13. Find Last Element using XPath Selector

Surround set of elements selector with round and use last() method in square brackets [].

await page.locator("(//div[contains(@class,'region-footer-bottom-second')]//ul[@class='menu']/li)[last()]").click()
Fri, 11/11/2022 - 11:48
Ashwin possesses over five years of experience in the Quality Assurance industry and is currently serving as a Technical Lead at iVagus. His expertise encompasses a broad range of technologies, including Cypress, Rest Assured, Selenium, Cucumber, JavaScript and TypeScript.

Video Tutorial: How to Find First and Last Element in Playwright

Tags

Comments