Page object and app actions. Let’s see what are they all about

all right it seems that i forgot to turn on the screen for for uh coming soon or for starting soon so i guess we can just uh jump right into it um might as well do a good uh youtube video all right so seems that seems that everything is running that's great so let's let's jump in let's jump into it um you might be familiar with this block stop using page objects and start using app actions so this is actually the first thing that will pop up if you google for page objects cypress this is the first result so kind of a strong statement right at the beginning you want to use page objects and what you see is stop using page objects and start using app actions and uh this block was written by le page and i think he and i liked that he made a strong statement for for page objects and app actions although i see that it creates some sort of confusion sometimes that for example you know when we talk on discord server uh i can see sometimes a question pop up like i heard that page objects are not it's not a it's an empty anti-pattern you shouldn't use it or something like that which is not really it's not really the case and i don't think lab is making this case in this in this block it's a long blog so if you if you didn't read it until until the end uh that's that's i guess that's okay there's a lot of lots to study in this and uh we're not going to study that today but we're going to look into some of the arguments that that clep has made here and we got some first viewers hi andrei nice to see you uh so uh yeah page objects are they anti-pattern uh definitely not if you feel like using page objects you can do that uh tests in cyprus are written in javascript so you can do whatever javascript allows you and if you need to make some kind of abstraction uh that's totally fine and you should probably do it you shouldn't probably have 1 000 tests written repeating repeating themselves over and over again because whenever changes whenever something changes in the app you'll probably have a lot of work to do and believe me i learned that the hard way so being quite a beginner i think that's that's what happens all right so let's uh let's actually move to the master branch oh and by the way i forgot to mention page objects and app actions this is actually a topic that i was that i will be know that i actually wrote a blog about but it hasn't been published yet but if you want to if you want to catch it when it is published make sure to follow me on twitter or on linkedin but more importantly maybe you should follow angie jones uh attack girl techgirl1908 i think or you can also follow aptly tools because that's who i wrote the blog for so it's going to be published probably this week we'll see we'll see about that but you can just follow me on twitter i'll definitely be shouting uh about that uh and it's going to be awesome so this is more of a live stream version of what's going to be in the blog maybe something more maybe something less anyway be sure to to check it out so let's let's start our app start and i'm mentioning this app all the time during every stream that i do and it is a trello clone app so i run it by running npm start it will just build itself and run it on a local host and you can check it out on my on my github you can't imagine page objects in cyprus well so let me show you let's actually start with uh page objects and let bill let's build something uh i know what we're going to build we're going to build some page objects around this login let's actually make this bigger so it's easier to see maybe that's too much and there's the login button and if i click on it there's a whole thing going on so i have this component which is a login screen or a modal window and it has couple of states so it has the login state where you can log in if you have a if you have an account and if you don't have an account you can click on sign up here and the state of the this model window will change to sign up so we can write we can write a page object for that because this may be an action that we may repeat quite often in our in our tests we will be signing up a lot we will be logging in a lot maybe and uh and maybe we want a page object for that so let's let's build one uh by the way i'm just going to be repeating a lot of stuff that has already been sent on test automation university at appletools and i'm mentioning applitools today a lot but they're pretty cool they have made this test automation university if you haven't heard about it i suggest i strongly recommend you check it out it is a free resource for various courses on well on anything on testing so uh yeah you got jenkins you got test cafe pie test introduction to javascript in general nightwatch webdriver robot framework cypress it's all in here and it's all for free and there's course on cyprus made by gil tayar i hope oh i didn't click on it oh sorry i didn't click on it i clicked on something else and i hope i didn't butcher gil's name too much but gil has made a made a introduction to cyprus video and he talks about page objects and i actually learned how to make h page objects in in cypress from his video to be honest i don't really know what page objects are i got a general idea but i didn't have had no idea how you would write a page object in cyprus and he introduced me to that so thank you gil and this is this will be a short showcase of what he chose so let me jump to the cypress folder and i will i will create a page objects folder and i'll just type it i'll just enter it here in the support because that that makes sense for me so let's name it page objects and hello webraptor nice to see you so and i'm going to name this page object login although we can do login and sign up with our we're going to be covering login and signup but i call it i think i call it a login component i think not 100 sure so let's do that and so page objects um i don't know what's the convention but what i've seen in gil's video is that you basically what you will create is that you're going to create a class and you're going to export that so you can import that into your test so i'm just going to write export class and i will name it login and this class is going to be containing uh various functions so for example the first one i have a thing over here first one will be called open because obviously what we want to do is we want to open open our our login model and what we will do here is that we are going to select our button over here over here and click on it so i so let's let's open cypress so we can actually start writing our test okay npx so i press open by the way is the music too loud i try to make it not too loud it was too loud last time so if you think that it is too loud let me let me lower it down a little alright so let's let's create let's create another test let's create an what music you cannot even hear it so there's like no music or it's it's very very low volume because no music is no not a problem if it's low volume then it's okay i guess if it's too loud then that's the problem that's the one i had last time so let's do let's do login okay it's low volume and we can live with that login login page object i'm going to name this and let's write the first test and that first test is going to be called login all right so let's save it all i'm going to login pos page object now let's see the browser is over here jumping all over my screens and since i got nothing in there nothing is happening except my coverage things by the way if you want if you're interested in coverage i did some videos on that so check out my youtube channel and you can look into that but i'm not going to be using coverage so let's just let's just set it to false we don't need that right now coverage will be false all right so now i'll run my test again and should be it should be completely empty and it is so that's great so let's close this and let's add something into our login po test so i'm going to type always tap enter twice not sure why visit we're going to be visiting our page and what we want to do is to get our element but i don't yet know what the element is because i don't know it by heart so let's just select selector playground and click on our login and we have data cy selector over here and since i've made the app i've added it so that's good and i'll just copy it um let's let's do that save this and what we want to do is to click on this so this is the action we are going to be repeating right get our element and click on it so i might just as well copy this and add it to our page object class so i will add this and it's going to be part of this open function so i'll save this now and our test is just going to be opening our app because i deleted this and now we're going to be using our page object so let's use it what i will do here is that i will import the login am i doing that right i don't know and i'm going to import logging from from the support page objects login is that correct probably we'll see okay so and now no it's it's underscoring login is declared but the value is never read oh that's okay so let's let's create a new constant constant which will be login with the lowercase l and that is going to be instance of new login and seems very good but there's still something wrong maybe i have imported it wrong it has no default export oh yeah i i thought i should put it in the i should put it in those brackets and yeah okay so now i've got a new instance of login and what i'm going to do in my test is that i'm going to do login and from that class i'm going to use the open function and as you can see i have i have my function over here so it's it autocompletes for me now when i run this i do login open save my test is doing what i expected so now let's click on sign up here so what we are going to be doing is that we will add another page object here and that will be go to sign up and since these are functions we can actually pass parameters we're not going to pass any parameter parameter now but if we wanted to we could but what we are going to be doing here is just select these this text which is sign up here and click on it so i'm going to be using contains command for that sign up here and we'll click on it and now i'm going to use it and what i want to do is actually to change these commands like i do with cy but if i start typing you can see that i'm not getting any any autocomplete and what i need to do with my page object is actually in each of these functions i think i need to do it in each of these separately like there's i probably have to repeat myself is to type return this and what this will do is that after the function after our command chain is executed then we're going to be returning to the original context so that will be login so we can actually chain off our functions and we are always going to be returning to the login class so now when i save this and start typing go to sign up it's going to be showing up and and we got this nice page object flow over here so now when i save this we are on the signup page so that's cool so you can see how these page objects can help us in in our tests right so we have something that is common and whenever we want to use that in the test we'll just import it create a new instance and then we'll just use it in our test and this is nice this is readable we are opening our login and we are going to sign up so i think that's that's pretty cool and it depends on your project if you want to do this abstraction then i mean go ahead by all means if you don't want to do that you can i don't know if you can just use cypress commands i mean that's that's totally okay because cyprus syntax is actually really really readable and what i think is important in in in our tests is that they are highly readable that whenever that test fails you exactly you know you know uh immediately you know what happened where it happened why it happened and so on creating these page objects can help you with that however if they are too complex inside i think it might get a bit complicated so you kind of need to do all kinds of architectural decisions on how to make your tests readable debuggable is that a word easy to debug and and easy to work with basically so yeah another use for page objects is that they can quickly get you to a state that you that you need that you want right so for example let's say that this is not even the important part in my test because i have a separate test for opening my login or going to sign up but i actually want to sign up and then do something so my user story actually starts with the with the sign up right so these are really nice and quick way on how to get to the to the state of my app where i have to sign up script screen open and i'll just start my user story here right i'll just start typing maybe i'll put this in a before each block because that's i want to write a series of tests that basically start on the signup signup page and and this is actually where our app actions uh can become handy because what we are doing here is that we are using our ui to get to a certain state state right we are test what it does it will click on the button then it will click on the sign up here text and then we are basically where we want to be but what if we what if we don't do that through ui um let me show you what i mean let's uh let's go to where's my browser here it is so i have my app opened here and i'll open my dev tools and i may have already mentioned this or not this app is written with view and by the way if you're new in development or app web development uh vue is actually a really really nice framework and i have found it it was a really nice experience for me to learn this uh i think it's it's fairly easy and you can achieve a lot with uh with limited knowledge speaking for myself um so uh yeah so view check it out they also come with this really cool dev tools and these dev tools these devtools actually can help you examine what's inside your app and i have these different states right so for example i have this error message when i which can be set true or false so if i set it to if i set it to true can i set it like this true nope oh it doesn't show up because because of reasons but okay but we have this show login module for example that i can check and voila you can see that my login module is actually visible i'm not sure why i'm seeing the sign up thing over here did i interact with my id probably yeah because the default state is login maybe it doesn't just maybe it doesn't reset when i when when some case happens so but yeah there's this flag there's this uh data point show login module that can be either set true or false and what i have in my app is is a function that will set this show login module either to true or false that's what i that's what i do and while i'm clicking in my dev tools i'm not using i'm not clicking on anything i'm just changing state of my app and this is what app actions actually do they can change the state of your app without you needing to interact with it so let's let's see what i mean um we will need to take a look inside the code of our app so let's let's look into the assets folder and i think this show show module is inside the now bar no no it was actually in the root and here it is okay so this this might look um look a little difficult but actually it's not it's the same thing that we were looking into in our dev tools we got the error message we got logged in states something like that we got the show login module true or false so this is the root uh thing right and as you can see this is basically how you define a new view app so you have your constant you have new view instance you got your methods routers stuff like that and i'm not going to go too deep in and then what we will do we'll mount it inside the inside the tag element which has the idea of trello app uh so it's just a javascript constant uh i'm doing something extra here and what i'm doing in my main.js that this app constant i'm actually exposing it in the window app so let me let me show you what i mean um when i go inside the console and type window app oops i can actually see let me make this bigger i can actually see my view app and there's lots of different stuff that even i don't remember uh or understand what what it does but if we look closely we can kind of start to see some kind of familiar stuff so for example our show login module is over here there are also some functions which are reset boards reset tasks reset users i haven't shown this yet but they're pretty cool so if you want to check out my app there's this functionality so when i create a new board and then type f2 there's this tool uh thingy that will reset my application if i want to so since i use this application for um showcasing um on my workshops or for working in my workshops these are the tools that you can pop up and basically reset the state of your app but let me oh what did i do okay uh but yeah so these are some functions that are used in over here uh but okay let's let's just close this now so that's a distraction let's let's just focus only on this on the show login module because we already know that this is what changes the state of our login model window so if this is set to true it's going to show up if it's set to false it's not going to show up it's that easy and you may have noticed that it didn't change because that doesn't like change life but what i wanted to show you is that i have my window app so that's going to be my view up similarly to what i have in my in my view dev tools but i can actually do a really cool thing i can go window app and go with the shell login module and set it to true and bam my my login will show up just like that so what i did is that i changed it changed the state of my app because it is accessible from the window context i i changed it like this so if i change it back to false my app is going to hide it and since cyprus is running in the same window that our application is running we can do exactly that so let's do like the simplest form of of page of app action that we can do so let's go back to our code i'm going to close this i will actually create a new file that's going to be login app action so not alcoholics anonymous but app action so log in with app action and i will type visit and then what i'm what i will do is that i will use the window command then use my then command and we'll take our app let me just show you what i what i do here so i'll just log this out app let me save this and run my test there so i used my window let's open my console and you can see that my view app is visible here so i got it i i logged it into my console so let's actually do the same thing we did in the other window and let's let's actually change the state of this show login module attribute so let's do app show login module and set it to true and i'm not doing window app because i'm actually calling window here passing it into the then function and then destructuring just the app attribute from there and inside my den function i'm setting it to true so let's save that and see what happens my login window is opened so we essentially did just the same thing we did a moment ago just type this and change the state of our app and we did that using the window context so yeah let's let's do something else here let's actually get to the sign up state and the sign up state i think i need to do something else for that let me let me just check my notes yeah okay so let's examine this a little so my app is made out of uh different components oh and by the way if you want to if i wanted to do like window app here you can see that it doesn't work it will just return something else and the reason for that is that if you work with console in in your uh in your cyprus you actually got multiple contexts here so you can actually go if you want to work with your app you need to switch that to your app and then when i type the exact same thing window app is actually going to return my view element all right so let's uh let's let's examine this a little so we we looked into the show login module that is set to true as you can see and we can look into into other stuff so basically what we did we have accessed our root component but we can actually well of course we can access our child components and those child components are over here and and this is where it gets kind of complicated uh or rather it gets hard to navigate through and i already know my app so i know what's where uh so i know there's a nav bar component there's a board list component there's the login component and all kinds of different components so i made myself a helper function that will help me with with selecting the right component so let me just actually find it because i because i lost it somewhere let me just yeah okay and it's a it's a really i think it's really a primitive way of approaching this um so let me just what will i do i'll not i will add a custom command but i don't actually want to add it here so let's just add it right into the index index file and this is it okay so i made myself a custom command called component and there's some custom logging over here and if i don't pass a custom component i will get a root component and if i do pass it's going to find the right component based on the name so i'm not going to go into explaining all of this it's really messy but let me just show you how it works so let me hide this for a little and use my cy component command that i have just imported and it's being underscored because i didn't add types for it but here it goes so when i click on this uh it returns nothing maybe i need to add something root probably oh yeah okay so now when i typed in root component it will really it will return my my view uh so this is already maybe starting to look familiar we got our show login module over here so if i want to type this uh but in a very similar way then what i will do is is just copy this and type it like this let me see i i kind of forgot already root i think i wrote it like this it's not it's not the clearest way not the less least messy way but it's a working way and by the way if you if you know know a good way of how to approach uh app actions if you ever used app actions let me know uh let's write in the chat let me let me know if you if you know how to do it i'm just kind of experimenting with it and what this is is actually showcase of what i have experimented with so what this custom command component does is it's just help me select the right component so when i select root i can show login module true and and it will set that variable to what i need what i want to do with my app action is to go to that sign up here and when i let's look at that's as you probably don't see over here right so i want to go to sign up here but i don't actually want to click on it i just want to change the state of my application so that this is visible so let's let's look into our app again for really little while and i have um i have my markup file here and all of my templates are in this i am quite aware that there is a better way to do this uh i'm just iterating over this app uh so let's let's find what we want to find we want to find this sign up here button so let me just let me just look for it sign up here and there it is okay so look over here we got an anchor link which has the text sign up here and if you're not familiar with view syntax this is how you can i think that's pretty readable so if i click on this anchor link do something that it's called lock sign switch and this is a function this is the name of a function we want to we want to trigger so let me find my lock sign switch and it is inside our login component so i got a couple of components here port collection logging navbar and here's the login component and what this function does is oh you want to do that is that it's going to change the sign up card active into whatever it wasn't before and then change the login card active into whatever it wasn't before so it if it was true it's going to set to false and vice versa uh let's look into that in inside the view tools right so let's click on let's open this and let's look into this login component so it has couple of couple of uh data uh attributes here and you can see that the login card active is set to true so we can see our login card it is active right if i check this off and basically set it to false then we will see nothing if i have sign up car active set to false i don't see it but if i check it it's going to show up and this is these two actions or these two changes are what our function does right so login site log sign switch is just going to take these two attributes and set it to true and false so back to our test let's again find our component component and we're going to be working with our login component and what we want to do is to use our den function let's go with login and we can actually do two things we can set this manually by a login card active login it's going to actually login login card active we're going to set that to false because we don't want to see that and sign up card active we are going to set to true so this is this is something we can do we are just going to be changing these data attributes to our desired state so let's save this and now that we run our test we can see that our app is opened our login component is visible and we are in the sign up state so we are getting to to the state without ever interacting with uh with our ui and we can actually instead of this we can choose another approach and just use our function right so instead of doing this again we can just call our function so let's do that instead and bam and now i can see it does the same right so we have changed the state of this of this login component and i think this is really powerful uh i think this is really cool way of how you can approach testing your app but i think the more important thing about these app actions or this approach to app actions is understanding your app so i have gone through maybe um i've dived deep into my application uh i'm sorry if it was a little confusing i hope it wasn't but if it was i suggest you come back to the video or read the blog that's coming out this week on applitools or maybe next week but i think it's going to be this week uh read the blog uh examine it or maybe clone the application uh from github and and uh yeah you can examine it uh yourself i actually have a branch that is called app actions page objects or vice versa something like that so you can check out the check out the branch and play with that uh over there i have that component component custom command over there so i'll save you some time with figuring out what's where but i think this is a great great way to learn more about your app whether your app is written in view or react or angular or swelt i think it is a good practice for testers to look inside the app understand how the state of the app is changed uh what changes it whether it's a function whether it's just a flag that it's set to true or false and stuff like that i very very much recommend it and there's lots of other cool stuff you can do that actually i wrote about one cool thing on my blog so it's philippis.com if you don't know it yet i write blogs every week so make sure you check it out but what i wanted to show you is that you can actually test a websocket application with cypress not that you would be able to to look for the web sockets like you can in your network panel but you can look into the state of your app so i have made the state of my app visible and and then what i did is that i looked into the state of my app and was actually expecting the state of my app change because of that incoming websocket and when you look into the state of your app you actually open yourself to a lot of new possibilities of how you can test your app you can go much deeper but i think the most valuable thing is that you can go deeper with the understanding of how how your app works so yeah i think this is all i had to say for today so yeah hit me up on twitter or linkedin make sure you follow me on youtube you know how youtube works so you can do that or not whatever i mean be free if you think this this deserved a subscribe you can do that you can also find me on twitch and i try to stream every week so far it has been most most of the time it was on mondays uh i'm thinking of moving it to tuesday but if you follow me on twitter we'll definitely know i'll i'll shout all day about that so thank you for coming uh this was this was nice um and yeah okay see you next week bye everyone

Channel: Cypress tips by Filip Hric

Views: 2,637

Keywords:

Id: Sd-i_VJiLqQ

Length: 47min 24sec (2844 seconds)

Published: Tue Feb 02 2021