Playwright Selectors

Man 1: [0:00] Playwright provides a number of ways for you to select different elements within the DOM. To demonstrate that, here we have a simple web application with two buttons. We are going to be interested in selecting the first button and there are lots of ways that you can see that we can select it.

[0:14] Some things to observe is that it has a data-test attribute. It has a CSS class and it has a button that contains the text submit. Now, let's jump into our code and create a basic Playwright test to interact with this particular button.

[0:28] At its core, we navigate to localhost:3000, and then we jump into our test, where we will be playing with a few selectors. Playwright supports all of the CSS selectors that are provided by the browser, and that's probably going to be the easiest way for you to select any given element.

[0:44] For example, in order to select the first button, you could select all buttons and then only select the one that has the primary CSS class applied to it. One thing to note is that, internally, Playwright comes with a number of selector engines and CSS just happens to be the default one.

[1:00] We can be explicit about our engine choice by providing the name of the engine followed by the equal sign, followed by a selector that is passed to the engine. For this particular example, we can also write the same thing, but this time with CSS= as a prefix for the selector.

[1:15] In addition to the CSS engine, the other engine that you will use quite commonly is the text engine. This particular example will match any element that contains the case insensitive string submit. Playwright also allows you to change different selectors using the double arrow.

[1:32] You are free to use different engines in different selectors. For example, in this particular case, the first selector is using the CSS engine and the second selector is using the text engine. This particular example, we'll find any button that contains the text submit.

[1:47] Another engine is the zero index-based Nth engine. As an example, we can also select the first button by using the button CSS selector combined with Nth=zero.

[1:58] A common trick used in modern web applications is to use a custom data-test style attribute in order to identify different elements that can be accessed from different tests.

[2:08] For these cases, Playwright provides a nice shorthand. For example, this particular selector will select anything that has data-test set to submit, which of course is our submit button. To demo these selectors in action, let's turn our test using the Playwright inspector.

[2:23] We start off at page.goto. We click the first button using button.primary selector with an explicit CSS selector with text=submit selector with the button such that it contains the text submit with the button, such that it's zeroth button.

[2:40] Finally, something that has data-test=submit.