Methods Parametrization | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Page Objects
Instructor: Artem Bondar
Lesson Summary
Lesson Overview: This lesson focuses on parametrizing page object methods to enhance their versatility and flexibility within a testing framework. Key Concepts: Parametrization: Increases the reusability of methods across different test scenarios. Descriptive Method Names: Use clear and descriptive names for methods to improve navigation and understanding. Implementation Steps: Create a new page object class: FormLayoutsPage.ts . Define a method to submit a form using a grid layout: async submitUsingGrid(email: string, password: string, optionText: string) { ... } Fill out the form fields using parameters for email , password , and optionText . Implement a second method for submitting an inline form: async submitInlineForm(name: string, email: string, rememberMe: boolean) { ... } Testing the Methods: Import the FormLayoutsPage in your test file. Create an instance of the page object and call the methods with appropriate parameters. Example of calling the grid submission method: await formLayoutsPage.submitUsingGrid('[email protected]', 'welcome1', 'option1'); Run tests with different parameters to validate functionality. Documentation and Annotations: Utilize comments and annotations to provide descriptions for methods and parameters, enhancing code readability and usability. Conclusion: By parametrizing methods, you can create flexible and reusable code that simplifies testing different scenarios while maintaining clarity through descriptive naming and documentation.
Video Transcript
In this lesson, we will talk about how to parametrize your page object methods. By parametrizing methods, you will increase versatility of your methods and flexibility how those methods can be used across your framework. So this approach is highly recommended, and I will show you how to do it in this lesson. So let's get into it. So in this lesson, we will create two methods for our FormLayouts page to fill out the form using the grid and inline form. And we'll make those methods parametrized. So going back to the framework, and I create a new page object class. FormLayoutsPage.ts. Copying the import of the page from the previous page. Creating a new class, export class. Create a new field for the page. And creating constructor. And let's create the first method to submit the form for using the grid. Async, and I'm giving the name to this method, describing what exactly this method is doing. So it's submit using the grid form with credentials and select option. So this will be a method name. As I was mentioning before, don't be afraid to give in the good descriptive names to your methods. It later always will be easier to navigate across your frameworks and understand what those methods are for and what they are doing. So using the grid form, have three fields that we want to fill out is email, password, and select radio different options, option one or the option two. So let's create three parameters. Email is type of string, password type string as well. And third parameter will be option text string as well. That's it. And now we need to create the code to submit this form and using those parameters. To speed up the process, I can simply take some of the code from the previous lessons and copy paste it instead of typing it again. So we can take this constant of using the grid form. Okay, forms layout and instead of page will be this dot page. And wait using the grid form and we need to fill out email and password. This will be get by role email. Fill, we want to fill email and the same thing will be for the password. Password and we need to fill out the password, I use the parameter. Then we need to select the option, it's this get by role radio button. Get by role radio option one and instead of using the option one, we will replace it with the parameter option text. And the last step, we need to submit this button. And wait, using the grid, get by role button, click. All right, that's it. Our method is ready to use. All right, that's it. Our method is ready and implementation is responsible for just submitting the form of using the grid with three parameters, email, password, and option text. Email will be replaced right here to fill out the email. Password will be replaced right here. And this line of code will select exact option that we want to select. Right now, we just simply call this method from the test and use it. So let me create a new test. Test parameterized methods. Since we created a new page object, we need to import it first. Import form layouts page. And then we need to create a constructor of this object inside of the test. We need to import navigation page object and const on forms. Form layouts page equals to new form layout page and pass page fixture inside of the constructor. And then simply call the page objects. Navigate to forms layout page on forms layout page. Submit using the grid and credentials. And then we need to provide three parameters. Email, for example, test at test.com. Second parameter is password. Let's say, welcome one. And third parameter is the option that we want to select. Example, option one. That's it. So let's run this test and let's see how it's working. Okay, it does not. So it was not able to fill the email. We forgot to use await, of course. And await. Okay, let's run it one more time. And right now it works successfully. Email filled out, password filled out and option one is selected. And now let's say if we want to run a second test, but with a different credentials, all we have to do is just call exactly the same method, but use a different arguments inside of the method. So instead of let's say option one, we want to select right now option two and run this test again. And option two successfully selected and we clicked sign in button. And let's create one more example for the inline form for this one. Same thing. Async. Submit. Inline form with name, email and check box. So for this form will be pretty similar. So we need to submit a name, which will be a string. Then we need email, which will be a string as well. But third parameter is a check box. We can provide as a Boolean. So either true or false. Remember, me check box will be type of Boolean. And we will incorporate this logic inside of the method. If the Boolean is true, we want to click on the check box. If false, we will not click on the check box. So I guess we can take the part of this code and just run it. So I guess we can take the part of this code and just reuse it in this form. So this will be instead of using the grid. Inline form. Exactly is on our application. Okay. Inline form. Inline form. Then we want to select the field, which has this value, Jane Doe. Jane Doe. We will fill out the name over here. And the second value will be email. And we will fill out email right here. The last argument is the check box. And we create condition inside of this method. If we have read me as a true, and we don't need to provide like equals to true. We don't need it like that. So we just provide if read me, it evaluates true or false. Then we want to await inline form. Get by role. Check box. Check. Force. True. And the last step after that, we need to just submit the button. Inline form. Get by role. Button. That's it. And let's call this method again from our test. Await on form layout page. And we have two methods available. Right now we want to submit inline form. And again, we provide three arguments. For example, it will be John Smith with email john at test.com. And we want to remember John during the submission. So we type true to select the check box inside of this form. And let's run this test. All right. The second form is submitted and check box is selected. And let's say if you put false. And run this test again. And right now check box is not selected and form submitted without this check box. So this is how you can reuse methods inside of the page objects and make them even more smart. So just providing in different arguments, you can use those methods in different test scenarios. So you technically use the same code implementation, but just with the different test data that needed for your test execution. And let me show you one more thing to better understand the description of your methods. So if you're just hovering over the method right now, you can see the method name and you can see what arguments it require. Name string, email string, remember me is boolean. So IntelliSense will give you a hint which arguments this method is expecting. But you can additionally provide more information about your methods exactly in the page object. For example, we take this second method and we use this kind of syntax. Forward slash, double star. And VS Code will create a block for you automatically with a description of the method. And you can type something like this. This method fill out the inline form with user details, for example. And then for each of the parameter you can describe what is it for. For example, name should be first and last name. Email, valid email for the test user. And remember me, true or false if user session to be saved. Something like that. And then if we go back to our test and hovering over this method one more time. Now you see this description about the method implementation. This method fill out the inline form with user details and the description for each of the parameters. So this is very handy approach. And if you keep your page objects like that with good descriptive names with annotations about what those methods are doing. It will be very easy to navigate across the framework and find a suitable method for different operations. All right, so let's quickly summarize what we did in this lesson. In this lesson, we created a new page object related to the form layout page. And we created two methods, parameterized methods to submit two of the forms. This is a very powerful technique. Providing the different parameters as a required argument inside of your method. You can differentiate the scenarios that you can execute in your test. So you can use the same method inside of the different test. But just providing a different arguments in your method. You can create a different user flows. And you can create additional annotation to your methods with the detailed description. What those methods are about and what those parameters are about. All right, that's it guys and see you in the next lesson.