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
- Demo Website
- First Element using first method
- First Element using Nth Method
- First Element using Nth Selector with CSS
- First Element using Nth Selector with XPath
- First Element using CSS Selector
- First Element using XPath Selector
- Last Element using last method
- Last Element using Nth Method
- Last Element using Nth Selector and CSS
- Last Element using Nth Selector and XPath
- Last Element using CSS Selector
- Last Element using XPath Selector
- 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()