From the course: Playwright Python and Pytest for Web Automation Testing: Master Modern Web Testing with Playwright and Pytest in Python

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

CSS selectors hierarchy

CSS selectors hierarchy

From the course: Playwright Python and Pytest for Web Automation Testing: Master Modern Web Testing with Playwright and Pytest in Python

Start my 1-month free trial Buy for my team

CSS selectors hierarchy

“

In the previous lesson, we learned about the CSS selectors and how can we use them to select web elements based on their tag name, class name, ID or any other attribute. In this lesson, we'll learn how can we select them based on their parent-child relationship. So let's say what we want to do is select this home link element right here. go ahead and inspect the same you can see it is a item with a class of nav link and the active class so if we go ahead and try to select this using the a tag name dot the class name that is nav hyphen link you can see we select around 33 instances now that's not good we just want to select one with this nav link inside this dark or black navigation bar. To do that what we can do is just take a look at its pattern. That is first of all we'll go ahead and select this black navigation bar and then inside of this we'll select this home link element. So let's go ahead and do that so first of all we'll take a look at the navigation bar itself you can see we…

Contents