Conditional Object Function | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Page Object Design Pattern
Instructor: Artem Bondar
Lesson Summary
In this lesson, we focus on creating a conditional method called FormGroupMenuItem to manage the state of menu items in a web application. This method will determine whether a menu item is expanded or collapsed before selecting other items. Key Concepts Previously, methods were created to select different menu items, such as FormLayouts and DatePickerPage . If a menu item is collapsed, selecting it would collapse the menu, preventing access to other items. The new method will check the state of the menu item and act accordingly: If expanded, it will select the menu item directly. If collapsed, it will expand the menu item before selection. Implementation Steps Inspect the menu item to determine its state using the area-expanded attribute. Create a private function selectGroupMenuItem to handle the selection logic. Check the area-expanded attribute: if (attr.includes('false')) { click on group menu item; } Call this function in the relevant page object methods and remove unnecessary waits. Best Practices When creating conditional statements, avoid relying on element visibility. Instead, use attributes that provide stable conditions across both states. This approach ensures that tests remain stable and do not fail due to visibility issues. In summary, we developed a helper function to conditionally check the menu item's state, improving test reliability and stability.
Video Transcript
Hey guys, we continue working with the page objects and in this lesson, we will create a conditional method, FormGroupMenuItem that will be responsible for checking the status of the FormGroupMenuItem whether it's expanded or collapsed to select the other menu items from the menu. So let's jump into it. So remember in previous lesson, we created those methods responsible for picking different menu items, and for FormLayoutsPage and DatePickerPage to select this menu item, for example, we need to expand a group forms item. If you want to select menu items one by one, like for example, FormLayouts, and then select DatePickerPage, what's going to happen that when we select the DatePicker, this click will technically collapse the menu item and the DatePicker will not be able to select. So instead, we need to create a method that will conditionally check if the forms menu item or the other group menu items are expanded or collapsed. If it is already expanded, we need to skip clicking on the group menu item and just select the menu item right away. Or if it is collapsed, we need to expand it and then select menu item. That way, we can safely remove this side weight and make sure that test will be 100 percent stable. Let me show you where is that in application. So right here. So when we click on the forms, and you can see that there is a little delay or animation. That's why to demo this flakiness, I had to add this side weight. How we can manage the state of this group menu item and determine is it expanded or collapsed. So look, we have a couple of options. Right-click, inspect. Let me close this. So when I expand it and collapse, first of all, we have this area expanded, change the value from false to true. So when it's not expanded, it's false. When I click on this, it's saying that true. So it is expanded. That's the option number 1. Also, you can notice that the position of this arrow also is changing immediately. So when I click on this form menu item, it's showing the arrow down. When I click on it again, it's showing arrow to the left. If I explore this anchor tag a little bit deeper, this is NB icon, and this is SVG, and a little bit deeper, and here we go. So we have that data name Chevron left. But if I expand it, and we'll inspect it one more time, we have the value of Chevron down. So we have two options. We can either use this area expanded true, or we can use this Chevron down or Chevron left. I would go with the path area expanded true because it is just a little bit easier. So let's create a new function that will be responsible for that. I will create a JavaScript function outside of the class body. So this function will be a private function within this class. So it will not be visible through the dot notation when we try to call this function from the test. So I create a function, and I will call it select group menu item. The argument will be group item name, and this is the body of the function. Then let's just write the code. So first of all, we are looking for site contains. We are looking for anchor tag. So anchor tag is this one, A. I'm looking for A that contains the forms, and the text will be this group menu item because this is the value that we pass into this function. Then I need to invoke the attribute attr, and the attribute value is this one, area expanded to get the value of either it is true or false. So area expanded. Then I get this attribute value, attr, and what I need to do this. Then I create a condition. So if this attr includes the value false, it means it is not expanded. Then I want to click on this group menu item to expand it, and I make a click like this. If it is already expanded, it means that this if condition, this statement will be just skipped and will not be clicked at all. Only if it is not expanded, this condition will be executed. That's it. So simple and lightweight function. After that, we need to call this function inside of the method like this, and pass as the argument, the form group menu item name like this, and I need to replace it in other page object methods. So I can replace over here. Right now, I can also delete this side weight as well. Then I put it right here and change the name like this, and right here as well. Models and overlays. So that's it. Let's try to run our test. So opening the Cypress page objects and running the test, and you can see the test pass successfully. So let's quickly look what was happening. So look, CyForms, AForms, and we have a command, click, and we selected FormLayouts. FormLayouts clicked. Then we are looking for CyForms one more time, getting the attribute, but look, the click, so let me pause over here. The click that we had on the line number 4 did not happen. So we identified that this form is already expanded, this menu item already expanded, and we went straight to the clicking on the date picker right here in their line number 10. So our condition working perfectly. If the menu is already expanded, we don't need to click on the forms one more time, and just click the date picker, and the same thing works for models and overlays. If I scroll it over here, so look, models and overlays, we click on it to expand, and then the next time, we get models and overlays, but not clicking on this and just selecting the toaster page and clicking on this. So that's it guys, our condition working perfectly, and let's quickly summarize what we did in this lesson. So we created a helper function that conditionally will check if our menu expanded or collapsed. For that, we are getting the attribute value area expanded, and then based on the value of this attribute, we define do we want to click on this menu item to expand or not, just skip this. Just overall, when you create conditional statements in your code, do not rely on the visibility of the elements. For example, if you want to create condition, if this element is visible, then do this, or if it is not visible, don't do anything. If you try to do condition like this, your test will fail in the case when element is not visible, because Cypress will try to locate the element, element is not found, your test just fail. Instead, try to find the element and some attribute that is visible in both of the conditions but have a different value. In this case, your condition will be stable, and your tests will be stably executed in both of the cases. That's it guys, and I'll see you in the next lesson.