Smart Reusable Rules | Bondar Academy
Course: Mastering testRigor
Module: Reusability and Optimization
Instructor: Artem Bondar
Lesson Summary
In this lesson, we enhance our reusable rules for navigating a test application to make them smarter and more adaptable to different UI conditions. Key Concepts Previously created rules were too straightforward, leading to failures when the UI state changed. For instance, navigating to the Form layouts page failed because the menu collapsed, preventing access to the Date picker option. Improving Navigation Logic To address this issue, we need to implement logic that checks whether the menu is expanded or collapsed . The steps include: Inspect the menu icon to determine its state (e.g., Chevron down for expanded, Chevron left for collapsed). Create a condition in the reusable rule: If page contains "Chevron left" to the right of "Forms" then click on "Forms" and then the menu item; else click the menu item directly. Update the logic for both Form layouts and Date picker pages. Handling DOM Structure We also addressed a DOM structure issue where the icon was not correctly identified as being to the right of the Forms menu item. The solution involved specifying the second instance of Forms in the logic. Final Testing After implementing these changes, we successfully reran the tests, confirming that navigation across various pages now functions correctly. The reusable rules are now capable of handling UI logic effectively. In summary, enhancing reusable rules with conditional logic allows for more robust navigation in applications with complex UI states.
Video Transcript
In the previous lesson we have created first reusable rules to navigate across the different pages of our test application But those reusable rules are not really smart enough to handle other conditions that can be So in this lesson, we will make our rules a little bit smarter to avoid the situation when the page cannot be selected So let's get into it So going back to the navigate to different pages Test and quick edit and this test works successfully, right? But if I change for example navigate to Form layouts page and try to run this test one more time update and retest Look what actually gonna happen You So this test failed because can't find element by descriptor date picker and let's check the screenshots So from here, so we click on the forms then click on the form layouts Then the next step the form layouts page is open the next step. We're clicking on the forms again This is related to selecting of the date picker page. And now our menu is collapsed So the date picker menu item cannot be Selected so this is the problem our current test running is just pretty simple Straightforward test click on forms and form layouts and for the date picker page It's doing exactly the same step click informs and then date picker page But by doing this we collapse the forms menu and that's why date picker cannot be selected So we need to make our test smarter to understand when the menu is expanded or collapsed So the reusable rule will understand the situation and handle this selecting the page that we want so going back to test application and let's see so make a right click inspect and When I expand or collapse the menu you can see that the value of this little icon is Changing the position of this icon. So right now it's pointing to the left and when I click on this it's pointing down So we can create a condition so if the menu is expanded just select the menu item and if it is collapsed need to click on the main menu and Expand the menu to select the menu item and we can trigger this by the position of this little icon So right-click inspect you can see right now the data name Chevron down Chevron down is the value that representing the position of this icon and if I click on the Collapsing right-click inspect. It has the value Chevron left So we can create a logic something like if the page contains Chevron left to the right of forms Then we need to click on forms and click on the menu item or if not We just click on the menu item and that's it So let's update our reusable rules to handle this logic and make the reusable rule Smarter than it is right now. So going back to the form layouts page and I write the following logic If page Contains and we are looking the attributes Chevron left inspect Chevron Left To the right of Forms it means that menu is collapsed and we need to click on forms and Then on form layouts Else We just want to click on the menu item so else condition means that menu is already expanded and we just need to select this menu item and Every condition should end with a keyword and that's it. And now we can replace these steps and keep it right here and We need to update the same logic so I click Save we need to update the same for the date picker page so let me copy this as a template and I update this instead of form layouts, I select date picker and date picker and remove this and And We almost done and in this application there is one tricky part so going back to application so we say Page contains to the right of forms and sounds pretty logically, right? So this is the forms menu item and to the right of this forms menu item is the icon that we are looking for But if we actually look into the DOM look what the DOM structure looks like So this is the form text menu item which is located, right? the next line is the icon that we are looking for to the right of forms and The anchor tag is the entire forms menu item and look this anchor tag also have title With the value forms So the problem here would be that the test trigger will look first into this first forms Instead of the text of the second forms and since the anchor tag is the kind of apparent Element for the icon that we are looking for this icon is not to the right from this anchor tag It's kind of within this anchor tag. It will not work So we need to specify hey find the second forms instead of title We want to pick up the text so to the right from second forms should be located this icon So let's update This step to the right of Second forms Okay, and here to the right of second forms as well and I click Save That's it. And let's rerun the same exact test. Where is it? Yeah, this is our fail test and just retest You All right test pass successfully now, let's check the screenshots so this is the screenshot number one Then we are checking the condition of the little icon You can see here and the icon looking to the left. So we click in on the forms Forms expanded and we selected form layouts form layouts pages open The next step we are validating the status of this icon one more time it's looking down it's not chevron left So we are picking the date picker instead of clicking on the forms We click in on the date picker right away and the date picker page is open. So that's it Our reusable rule now is more smarter It handles the UI logic of the application and now we need just to refactor the other Reusable rules inside of our framework to make it smart as well. So I use this logic as my template It's just copy paste across the different rules You You You You You All right, all reusable rules are refactored and now we can just test it and try other pages for example Navigate to window page and navigate to let's say I don't know tooltip page something like this and let's run this test and now the navigation across the pages should happen flawlessly as our reusable rules smart enough to handle expanded or collapsed status of the menu item All right test pass successfully and navigation across four different pages happens Successfully, so let's quickly summarize what we did in this lesson So when you use a reusable rules and you have a tricky parts of your user interface You can hide some of the logic to navigate across your user interface or other logic inside of the reusable rule So making your reusable rule even smarter so it will responsible for the certain functionality that it has to perform on the page for your Application and the way how to handle this logic using if-else block providing the necessary steps All right, that's it guys and see you in the next lesson Learn English for free www.engvid.com