Locators Reusability | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Locators and Assertions
Instructor: Artem Bondar
Lesson Summary
In this lesson, you will learn about the importance of reusing locators in your code to enhance organization and reduce duplication. Reusing locators is a key step in optimizing your code. Lesson Overview The lesson begins with a simple scenario of automating a basic form, which includes: Typing an email Entering a password Clicking the submit button Initial Code Implementation The initial commands used to interact with the form include: basicForm.getByRole('email').fill('[email protected]'); basicForm.getByRole('password').fill('welcome123'); basicForm.getByRole('button').click(); After running the test successfully, it is noted that there is significant code duplication with the basicForm locator repeated multiple times. Refactoring the Code To eliminate duplication, the locator can be assigned to a constant: const basicForm = ...; This allows for cleaner code by replacing all instances of the full locator with the constant basicForm . Creating Additional Constants Further abstraction can be achieved by creating constants for specific elements: const emailField = basicForm.getByRole('email'); This allows for even simpler interactions: emailField.fill('[email protected]'); Assertions The lesson concludes with the introduction of assertions using the expect function from the Playwright library: await expect(emailField).toHaveValue('[email protected]'); Summary To reduce code duplication: Reuse locators by assigning them to constants. Increase abstraction by creating new constants from existing ones. Implement assertions to validate your tests. Thank you for watching, and see you in the next lesson!
Video Transcript
In this lesson, you will learn how to reuse locators. Locators reusability is important way to organize your code and remove the code duplication in case you need to use the same locator several time for the different operations. So reusing locators is the first step to optimizing the code. And let's get into it. So let me start a new test. So first let's automate a simple scenario filling out the basic form. So we have a basic form. Let's type email, password and click submit button. And then we will refactor it to look just a little bit nicer. So from what we learned so far, we can do this. So we can type this command and the card basic form get by role email. And instead of click, we will use method fill and type email test at test.com. Then the next step, we want to use the same basic form. And instead of using email, we will use password and we will type welcome 123. And then again, we want to use exactly the same basic form. And within this basic form, we want to find our button and click on that button. Click. So first of all, let's make a quick run. Yeah, and successfully worked. We have a username, we type password and click was performed. But if we go back to our code, we see how a lot of duplication we have, right? We have basic form, this line repeated three times. So in order to avoid this duplication, we can extract this locator into the constant and then use just a reference to this locator. So I create a new constant, const and let me call it, for example, basic form equals. And then I take this locator and assign to this constant. Then instead of using this full locator, I just type basic form and replace a basic form to all three instances. So that's it. We quickly reformatted our code, assigned the locator to a basic form to a constant. And then we just use this constant to call the child elements such as email, password and click the button, run this test. Yeah, and it works successfully. Additionally, if you want, you can make another level of abstraction by creating a new constant using the existing constants. So I create a new constant. Let's say I want to create the constant for the just email input field. Email field equals to basic form dot and we get this get by role email and put it right here. And now instead of using this structure, I just put email field dot field test at test.com. And it works perfectly fine. So let's just make one more thing to complete our tests, basic form and within this basic form, let's say I want to click on the checkbox and this is the locator for the checkbox. It's just a one checkbox for that particular form. So this locator is unique for us. Perform a click, run it again. The click was performed. The click was performed. And at the end of the good test, let's write our first assertion. Await, expect. And in order to use expect, I need to import it here from the Playwright library. Test and expect. Now I can use an expect and we expect that our email field to have value and the expected value is this one, test at test.com. And then run it again. Test pass successfully. Here's our assertion and assertion passed. All right, so let's quickly summarize what we did in this lesson. If you want to reduce the duplication of your code, you can always reuse your locator, assigning them to the constants. So in this example, we assigned the basic form to the basic form constant. You can increase level of abstraction by reusing the already created constants, creating a new constants like this. And then later in the code, call this constant that represent a reference to your locator and find the child elements. And we perform a very first assertion. And we perform a very first assertion, just the introduction to the assertion to the Playwright. And we will talk more about assertion in the lessons to come. All right, thank you guys and see you in the next lessons.