Selector Engines

In addition to the default CSS engine, playwright provides a number of additional built-in selector engines and understanding them allows us to come up with very powerful ways for selecting pretty much anything that exists within the web document. For this particular demo, we have a very simple HTML page setup with two simple input fields and two buttons, A submit and a reset present within a simple HTML form. If you look at the HTML for this page, you can see that we have lots of ways for selecting the different elements, including class names, text test, IDs, placeholders, labels, you name it. This page has it, and this will help us demonstrate the

various ways that you can use selectors with playwright. Let's create a simple test to demonstrate the various selectors that we can pass to the playwright locator function. Of course, one of the simplest locators that we can create is with the CSS selector as an example, we can use button or primary to select a button element that has the primary class applied. Playwright allows us to be more explicit about our engine choice by using the engine name followed by the equals character. So Prefixing, this particular selector with CSS equals is going to be exactly the same thing. Another engine present within period is the text engine.

As an example, we can use text is equal to submit, to find something on screen that has the text submit. We can also change selects within playwright by using the double greater than sign. So this particular locator will look for a button element such that it has the text submit. Another engine present within playwright is the nth engine. As an example here we are looking for a button that is the nth zero, which is the first button. It is common to use a data dash test Id attribute on your HTML elements to make the contract between the user interface and the test code more explicit. And for that purpose we can use the data

dash test ID engine. And while it is not recommended for modern web development, because we have so many other better selectors available to us, XPath is something that is also supported by playwright. Here we are looking for a button such that it has the class. Primary one XPath that is still extremely useful is the.dot. So here we are selecting the parent of a button element. Now let's demonstrate how these different locators work on our particular sample HTML page by using the playwright inspector. To start us off, we are selecting a button with the primary class using a basic CSS selector. And then again, by being more explicit about the fact

that this particular value should be used with the CSS engine, then we are selecting something that has a text submit. Then we are selecting a button such that it has the text, submit a button on the page such that it is the first button, something that has the data dash test id attribute of submit using an XPath for that button. And then finally selecting the parent of a button element. As you can see, there is a lot of power available by simply using a string argument to page locator. Even though we can pass advanced string selectors directly to the locator function, where it comes with the number of methods that make it super easy

and convenient to select different elements on the page. Based on well-known testing practices whenever possible, It is recommended to use these methods instead of using the complicated string selectors. To start us off, we create a simple test. And I want to point out that if you want to use a CSS selector, simply use the page locator function as that is the default interpretation of the past. An argument. Now, many form fields, for example, inputs, radios and check boxes don't actually contain an associated text, but playwright provides this utility method called Get by label, which allows us to select these form fields

by using their associated label text. Another thing that we can use with an input element is the placeholder and playwright provides a method get by placeholder for this purpose. If you want to get something by the title attribute, we can use get by title. And if you want to get something by its text content, we can use the method get by text. Now all of these methods are actually present on locators and page is just a special kind of a locator. This means that we can actually chain locators quite easily. For example, here we are locating a form and from within that we are finding something that has the actions loss.

And within that we are finding something that has the text submit a common set of methods that we use with chaining other methods that wrap the nth engine. So we have methods to find the first element or the last element or the nth element. Here we are simply passing zero to select the first button. Another neat thing that we can change is the located.dot, which can be used to select the parent element as we saw on a previous demo. And we also mentioned that the most reliable way to select something is by using the test ID attribute. And for this purpose, playwright has the method get by test id.

Now let's run this particular test as well by using the playwright selector to see its behavior on a sample page. You can see that right now we have selected a button with the secondary class. We can select an input element based on the text of its label. We can select an input based on its placeholder. We can select an element based on the title attribute. We can select something based on its text content. We can even chain locators to select a button. Within the form actions. We can select the first or the last or the nth button. And of course nth is going to be zero index based. We can select the parent of a button element

and of course our favorite. We can select an element based on its test ID knowledge of these utility methods can help you write cleaner playwright tests. Playwright locators also have a very powerful method called filter, and this can be used to cater for some pretty advanced selection scenarios, but we want to narrow in on a particular element. To demonstrate the filter, we create a simple test and one of the ways that we can use the filter method is to locate something that has a particular descendant locator. So here we are looking for a field element such that it contains within itself something that has the test.

Id name. Another way that we can use a filter within playwright is to find something that has a child with a particular text. For example, here we are looking for a field such that it has a child that has the text, email. Let's demo this example using the playwright inspector. And here you can see that we have selected the first field because it has a child with the test Id name. And for the second example, we have selected the second field because it has a child with the text email. Now the filter method is not something that you will use often, but when you have the use case for it,

there is really nothing else like it.