Parametrized Object Method | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Page Object Design Pattern
Instructor: Artem Bondar
Lesson Summary
In this lesson, we learn how to create parameterized page object methods to enhance reusability in test automation. The focus is on automating interactions with forms using the Cypress framework. Creating Page Objects We start by creating a new page object file named FormLayoutsPage.js and define a class FormLayoutsPage . We then export an instance of this class: export const onFormLayoutsPage = new FormLayoutsPage(); Submitting Forms We create a method called submitUsingGridForm that accepts parameters for email , password , and option index . This method encapsulates the logic for form submission: Type email and password using placeholders. Select a radio button based on the provided index. Click the Sign In button. In the test, we call this method and pass actual values: onFormLayoutsPage.submitUsingGridForm('[email protected]', 'welcome', 0); Using Booleans for Checkboxes A similar method, submitBasicForm , is created for a basic form that includes a checkbox. A Boolean flag determines if the checkbox should be selected: if (isCheckboxSelected) { /* select checkbox */ } Implementing Date Pickers We also create a DatePickerPage.js for handling date selections with two methods: selectCommonDatePickerDateFromToday selectRangePickerDateFromToday Both methods utilize parameters to select dates, allowing for flexible test scenarios. Conclusion To improve reusability, parameterize methods with meaningful names and limit to three parameters for clarity. This approach allows for versatile test implementations without code duplication.
Video Transcript
Hey guys, in this lesson, I will show you how to create parameterized page object methods and that way you will make them highly reusable. Let's get into it. So I have created a new test in the pageobjects.cy.js and call it a test with page objects. And let's automate, for example, in the test application, interaction with this using the grid form and basic form on the form layouts page. So let's begin. And first of all, since we operate on the form layouts page, we need to create a new page object under the page objects folder, new file. I create FormLayoutsPage.js and we'll create a new class here, FormLayoutsPage. And we'll export constant right away. Export const on FormLayoutsPage equals to new FormLayoutsPage, like this. So let's create a first method to interact with them using the grid form. I call it submit using the grid form. Okay, so this method will be responsible entirely for submitting using the grid form. I'm not creating the independent method like type email, type password, click Submit button. I create the method that will be responsible just for that. And all those parameters like email and password, I will pass as their parameters. So let me create those. It will be email, it will be password. And what else do we want? For this form, we want to select option, either option one or option two. And we will do it using option index parameter, like this. Now let's create the code. I think I can take some of the code that we created before on the form layouts page. So I take this using the grid form layouts page, using the grid, then form. And we'll continue operations within this form. Sywrap, I wrapping the form. Then within this form, I need to find some attribute. I think I can use, let's go back. So email and password, it is a placeholders that I can use. Placeholder email, like this. Going back, placeholder email, and then type. And then instead of typing the hard-coded value that we did before, I pass the parameter of this method. So type email, like this. Then similarly, it will be for password. Instead of placeholder email, it will be password, password, and I will type password right here. And then I will need to select the radio buttons. So again, it will be sywrap. I will choose by type equals to radio. So if you remember the lesson about the radio buttons, the type for the radio buttons inspect is the radio. So I'm using this attribute. By the way, it should be lowercase. So type radio, like this. And then we want to select it by index. It's just my decision. Or you can modify this code to select it by the radio label. In my example, I will use index. So I will use EQ, like this. And here, instead of passing, again, hard-coded value, I pass the parameter index option and check. And it will be F4's true, like this. And the last step, I need to click on Sign In button. Cyform and contains. Let's see, the text is, yeah, the text is sign in, sign in, like this. That's it, method is ready. Now let's call this method inside of the test. So page object, let's see why. First, I need to navigate to the form layouts page. You see, when we have methods already created for navigating across the pages, all I need is just to call the method, and I don't need to call that code again. So this is why page objects are so useful. And then I need to onFormLayoutsPage, import it automatically. Submit using the grid form. By the way, I made a mistake, the grid form. The grid form, like this, okay, submit using the grid form. And then I pass the actual values that I want this form to be submitted with. Emails, let's say test at test.com, then comma, then password, let's say will be welcome. And then I want to select the option by index. Let's say I want to select the first radio button, so it will be index 0. So let's try to run this test. Going back to Cypress, page object.cy.js, and running this test. Here we go. The input email and password were submitted, and option one was selected. If I go back and change, for example, to index one, I'm going back to the test, and here we go, the second option was selected. So using the same method, now if I need in the different test, if I need to fill out different username, different password, or select the different option methods, I just call a single method in all those tests by passing a different parameters, I can drive the different logic in this test. How about that? So let's make a second example. So I close this, and let's make a similar example for the basic form. So technically, it will be very similar to this one, except I will show you how we can use Boolean. So submit basic form, like this. It also will have email, password, and also it has, going back, it has this checkbox, check me out. And I can create a Boolean flag if I want to check this checkbox or not. So let me create this flag, and I call it isCheckboxSelected, like this. So now let me copy this code as my starting point. My form name is basic form, right? Let me double check that. Yeah, it is basic form, then placeholders email and password are the same. And then instead of the radio, it's gonna be a check box. And I will put this logic, I need to remove this EQ, because it is a single check box, like this. But I will put this line into the logic. So if isCheckboxSelected is true, then I want to execute this line of code. Otherwise, it will not be executed. And the last step will be to click on the, what button is that? It is submit button. So I replace sign in with submit, like this. So now let's call this method in the test. On the same page, on form layouts page dot submit basic form. And the same thing, I pass, for example, artem at test.com. Then some random password, welcome. And then third argument will be a Boolean. Do we want to select the checkbox or not? So if I pass true, then it will be selected. If I pass false, it will not. So let's try to run this test. Page objects, running the test. And look, the checkbox was selected successfully. If I go back and change it from true to false, and going back again. And right now, the checkbox was not selected, but still, submit button was clicked, and the form was submitted successfully. So this is how you can drive the logic using the, for example, indexes or Booleans to create different data flows inside of the same form. And let me show you one more example with parameterized method. Let's say we will navigate to the date picker page that we already have. And on the date picker page, we have two calendars, CommonDatePicker and DatePickerWithRange. And the same thing, we can reuse a lot of the existing code on the same elements because there is a lot of similarities. So let me create a new page object, new file, and I will call it DatePickerPage.js. The process is the same. I create a new class, call it DatePickerPage. Then I create a new constant, export constant on DatePickerPage equals to new DatePickerPage, like this. And then let's move some of the code that we created before. So on UI components, where did we work with the DatePicker? So first of all, we have this function that is responsible for selecting the date. Let me just take this function and move it into the page object. We will need it, like this. Then UI components, we have this code for the form picker. And I will take it as well and create a new method inside of the date picker. Select common date picker date from today. And the argument will be number of days from today, like this. So now let's look into the code. Again, this one that we need, DatePicker, and paste it right here. So instead of number of days from today, I just take and replace it with this argument, and that's it. Let me quickly reformat. And also, let's create the second method that will select the date picker with range. So technically, it has exactly the same picker, but just need to pick two dates. But other than that, the rest works fine. So let's create the same thing. So select range picker date from today. This will be the second calendar, and we need two arguments over here. Number of days from today. Start, and the second will be number of days from today. And like this, and the logic will be quite similar. So Ctrl C, Ctrl V. Instead of form picker, I need a placeholder, which is, let me delete this, which is a range picker. So form picker, I replace with a range picker, like this. Then, I call in the same method, select date from today, but I will select start date, and then I call exactly the same method, and select the second date, which is the end date. Now we need to adjust the assertion. So date to assert start, and date to assert end. And then we need to create a new assertion string. So final date equals two, and the format of the string have to be like this. So the date, space, dash, space, and then the second date. So let's do this. I will do interpolation, backticks, dollar sign. The first will be date to assert start, then space, dash, space. And then again, dollar sign, curly braces, and end. And then the final date, I make the validation of the input field. Let's try to run it. So going back, date picker page, then on date picker page, dot select common date picker from today. And let's say I want to select five days from today. And then for the second calendar on the date picker page, I want to range picker. And let me select, let's say, ten days from today, and the second will be 50 days from today. Let's run this test. So going back to the Cypress runner page object. So first, it will execute this test, and then the second test pass successfully. So look, common date picker was selected, range picker was selected as well. All assertions passed successfully. So going back, and let's quickly summarize what we did in this lesson. So in order to improve reusability of your page objects, it is highly recommended to parametrize your page object methods. Use, as a recommendation, up to three parameters, because other than that, it will be quite confusing if you add more how to use this page object method. So you create the parameters, give those parameters a meaningful name, and then within the page object, pass those parameters to the methods where they have to be used. And then from the body of your test, you just pass the actual values into those methods, and that way you can reuse the same method with the different values across different tests without copy pasting your code, and just calling the method responsible for particular operation on your page of your project. All right, that's it guys, and I'll see you in the next lesson.