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.

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()