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.
![Playwright Find First and Last Element](https://www.programsbuzz.com/sites/default/files/2022-10/Screenshot%202022-11-11%20at%203.11.39%20PM_0.png)
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()
- Log in to post comments