Custom Cypress Plugin Test Automation Demo for AG Grid with Kerry McKeever

hello my name is alan richardson welcome to this video we're going to speak to kerry mckeever who has created a cypress what would you call an extension a plugin for ag grid to help automate hd grid we're just going to discuss what it does how it works and we'll see how far we go so hello kerry hey there how are you doing good thank you so this is going to be your show so you because you're the one that's created this thing um so what is it what is this thing that you have created yeah so you're absolutely right it's um you can think of it as an extension but in cyprus terms it's a plug-in that kind of extends the functionality of cypress around eg grid itself so it uses cypress's api but then allows for gathering and manipulation of age of big data um right now i will go into the kind of the specifics of what that does exactly but a lot of it is being able to interact with aeg grid in a way where we can validate our implementation of it in our application cool and this is um exercising it from the outside so it would work on the end-to-end system the deployed system yes uh actually it could do either or so with uh with cyprus it's really interesting because it works from within the uh the application so it's internally uh so we can do it with while we're building our application as well we don't have to wait to deploy it to an environment so it's uh really something that's beneficial for people that are developing and integrating each grid into their application uh because then they can test in tandem with the development efforts right cool so show we have you got your um screen ready to go do you want to show it yeah absolutely because the easiest way for people to understand this and see it is to see an action and this is all open source it's all on github people can use this it's open source completely free all on github and anybody's welcome to extend it uh so you know you're welcome to go and what i'll do is i'll show where it is on github so um it's it's not exactly easily googleable which is just so funny because it's not a lot with cyprus and ag grid but i'll share the link here so that people know exactly where to find this all right so yeah first and foremost here's where uh the cypress plug-in lives it's open source like we had discussed before it's completely free and available to anybody that's using cyprus and wants to extend it themselves they're welcome to do so um here we have pretty comprehensive documentation on how to walk through it and use it all different types of use cases that you could want with its current functionality and if you scroll down we also have some limitations in place ideally what i would like to do is build this out and extend it a little bit further to remove some of those limitations but edgy grid is just very dynamic and there's so much that you can do with it and really this plug-in initially was just for a very limited purpose of gathering the data from the grid validating the data maybe doing a little bit of grid manipulation but there's so much more that can be done here so that's the thing about um building automation is that you build it for your specific needs so you've used this to work you build it for what you're trying to do with that work yeah exactly and and the thing i do touch on this a little bit it's that my intention here is not to do uh the full automation of a third-party plug-in such as ag grid it's more or less just to enable my efforts to automate against it and validate our actual implementation of it so that's why you won't see everything covered in here uh you know all the different bits and pieces that you can do with ag grid for your implementation um so it's really just use it to your own discretion and and make sure that you're not trying to automate so much of a g grid as you are automating your code with age grid that's a good point i think you cover it in the blog post what i'll do is when we release this video i'll stick links to your blog posts and things because you do describe in your blog post the the limitations and scope that we have to apply when we are automating someone else's work because we don't want to have to go down the rabbit hole of automating all of a g grid you just want to automate the parts that help you move forward with your application so that you know that your application is working absolutely because you can absolutely fall down that rabbit hole and you find yourself just automating every use case and that doesn't really provide as much value as one might think you really just want to automate as much as you need to to understand that your application is in a good state uh you can release with confidence and that's what i'm hoping that this plugin can help people do yeah and the benefit is um you can read the code so people can extend it and i've read the code and i'm not a great javascript programmer but i can understand most of it so um that's a good point so hopefully we'll get to look at the code as well and we'll see how it works yeah absolutely and i'll check and also i've been playing around with extending it a little bit as well and i can talk about some of my personal road map that i have for this um but uh what i could do is i you know i won't scroll through the documentation too extensively i just want to be known that we do have the documentation available i can jump right into the code and kind of show you what the test looked like why about we run it and let's see an action that shows something really exciting yeah let's do it all right so here i have cypress already loaded we just have a one spec here which is just going to contain all of our smoke tests for this so if you're you know if you're extending uh this plug-in or if you're doing any kind of um adding a pr to the github then this is what you would run and what would be run in the github actions to make sure that everything is functioning properly but it goes through pretty much everything that you need uh in all of the functionality that this plug-in has at this moment it runs pretty quickly so it's fairly lightweight and this is so cypress then is loading itself and the app into the browser at the same time exactly yes so unlike selenium which is a browser automation tool this is more of an automation tool that exists within the application so you can leverage your actual you know if you're working within javascript libraries like angular react view what have you um you can hook into the code that's within them and do some manipulation with your tests uh which i actually do for the purpose of ag grid validation um uh in that same note one thing that i do is you know this is a very small table you know we have four columns here uh we don't have a lot of rows i think we have what five rows here um but there is pagination and why i bring that up is because you know in the real world especially if you're dealing with a ton of data maybe you'll have 20 rows or not 20 rows but 20 columns maybe you'll have infinite number of rows um and the way that uh ag grid loads up its data is in the dom if you're looking at how it's loaded up all that you'll notice that is available to gather from that table is whatever's within the viewport and that can be that can be troublesome when you're automating your test because if your test cannot gather all of that data uh you're not doing a full validation so one of the things that i do is i go in and in the application um i'll dig into some of these tests that ran here but just kind of pivot a bit and show what i'm doing i'm going to go into the app in our grid specifically and you'll notice down here i'm doing a check with the ag grid when we load it up with our data and we're about to you know present it um i'm checking the window object to see if cyprus is running and what this is saying is all right if cyprus is running i want you to squish all those columns into the viewport so i so i have them all available so none are hanging off the screen and not visible within the dom and this helps me it doesn't look pretty you know it's not really the way that it's going to be presented to the end user but for data validation and verification purposes it works exactly how i need it to um and it's a good way to check you know or is this being run by automation and what do i need to do to make sure that my application is in a state that allows me to do the validation that's required you know to check all the boxes and say all right we're good here and is that what you do in the real world or not just in your test example i do yes so it really depends also on your implementation of ag grid so if you have a pretty standard implementation um and your grid is rendered at the time of so i work with an angular primarily and if your grid is rendered at the time of the components um uh the constructor gets called what you can do is you can have just this little block of code in there and it will do exactly what i was saying which is just squish everything in really tightly and let you get all that data from the dom however there are some implementations where maybe you're doing a little more massaging the data and or maybe the grid is not fully loaded at the time of the constructor being called within that component for example um then it's not quite as straightforward uh i i'm not 100 sure what goes on what goes on behind the scenes of size columns to fit i know it does some mathematical equation to make sure you know at a very high level uh and i might be speaking a little bit ignorantly here but i know it does some mathematical equations to see what size the grid is and how to you know squish everything in um which does not work 100 of the time i would say maybe maybe 80 to 90 of the time but in those instances there are ways that um there's ways around it for instance currently in an application that i'm working on this does not quite work the way i expect it to but during the execution of the test i can manipulate the viewport so i just set it to a very wide viewport so all of my columns are visible and accessible and it works just as good and then right after i validate or grab that data i set the viewport back to the original size it's not preferable but you can work around and cyprus can run headlessly as well as in that gui format absolutely yep so should we have a quick look at what the test looks like in cyprus absolutely so uh what i can do is um let's start with the very first one it's a little bit more of a complicated scenario where we're validating paginated data and one of the cool things about cypress is if you open up the runner what you can do is see how it was doing its execution and validation in real time so as i scroll over the log here you'll see certain items changed or get highlighted you see that we're clicking on the next the next button for the paginated grid and we're scrolling through and we're doing this validation here as well which will be shown as agreeing a search block in the log and that's saying dom snapshot is that an actual dom snapshot that it's rendering in the browser is this isn't a screenshot we're seeing this is an actual save dom absolutely so one of the cool things here is i'm going to go ahead and click on this say we had a failure or maybe i want to do an additional you know check here to say all right this is array 5 to deeply equal array 5. okay it doesn't really give me much detail so i want to make a double check and make sure that what it's asserting is exactly what i need to so all i would do is open up our um dev tools and go to the console and i can look at the one-to-one array comparison here to make sure that all right you know this is exactly what i'm expecting it to be we have this array deeply equals this one's that's pretty cool um because i've just been using the react testing library and uh one of the limitations i was having was when i was trying to debug tests that were not working well so cyprus is clearly really supporting that use case it is it's it's been very helpful um you know i've worked with selenium for a large part of my career and uh you know selenium it gathers screenshots you can do screen recording if you enable it um and you have your logs but this makes it so much easier to debug in my in my uh in my experience it makes it easier to debug um say you have an issue with um an element in your dom i can go ahead and click on this guy and it gives me that element right here so i can look at this and say okay um is this the element that i'm looking for or maybe uh my selector i'm using is incorrect where it's bringing back more than one element because you'll show me it shows me you know exactly how many elements are given back with the selector i used so um in my opinion i think it just allows for uh faster and easier automation that's cool yeah and so that's essentially what this test is doing it's going through and i have some um if we let me pull up the tests in cyprus itself so you can kind of see the behind the scenes dirty details of how it's doing the paginated testing uh and the way that it's done here is it's not really a realistic scenario for uh real world automation you'll see that i've chunked it out into an array uh but it's static so it you know for the purpose of showing an example of how this does this works fine but in the real world you're not really going to be working with static data so uh in the past what i've done is i create data models that will parse out the data that i'm gathering from some sort of data source um and uh and chunk it out in the way that this is done so say i have paginated tables that have 15 rows per tape or per page um i'll create logic that can uh set it to you know chunks of 15 rows and then do my validation that way and it's worked really well for me that's cool and if you scroll up a little bit because i think i saw some magic at the top so there you've got your before each so you're and so that to me looks as though um you're visiting the page then you're doing a synchronization on is there a a cell rendered in the table absolutely yes so i do look for the cell to be visible and the reason why is you know cyprus moves pretty quickly and it'll see that you know down here we're getting the table and it says all right so i have a table element but it'll throw a failure so if i get rid of this guy just to show you what would happen if we don't do that check first and i'm going to only run this one test it if it should fail yes so you'll see here what it actually got was an empty array because in that moment your table was not loaded so you need some some kind of check there just to make sure that your table is loaded and the easiest way to do that was just verifying that a cell was visible any cell yep synchronization is um the hardest bit of uh gui automating i find um and but the cyprus have some uh synchronization built in does it do retries it does yes so typically it does retries um and what it will do is so it's a little bit different with the way that we're working with this because like i said before it did see a table and what we're doing is we're getting a table and if we look at the dom at this moment uh while it's loading the table exists so it won't do a retry it'll say all right so i see the table but the data that you're getting from it does not exist so that is an automatic failure but if in the test i was looking for a cell it would retry um up to you know they have a default amount of time that it would retry that's configurable in cyprus it would retry up until that point before it presents a failure so does that mean when you were doing your testing you didn't have to do much synchronization you just had to synchronize on the grid being ready essentially yeah exactly you know it's not 100 foolproof there are times where it just you know cyprus is moving very quickly quicker than your application is and or maybe you're waiting for an element to be in a particular state before you do any kind of validation or um or interaction with it so there are times when you do have to implement some kind of smart way to wait for your element to be in a particular stage but i would say largely cyprus takes care of that for you all right cool so what did you actually have to write in your abstraction there so uh yeah if we want to look and see what we're doing in the in the actual uh ag grid plug-in oh all right here we go so in our ag grid source we have our interactions first and so the big one here is we are gathering the ag grid data from the grid um and so what this is essentially doing is we feed it a selector whatever our top level selector of the grid is so this age grid element and you'll see here before we do i'm going to find one where we're actually pulling the data here we go okay agreed data so we're doing cy.get which is essentially saying hey here's the element that i want you to get with the selector i'm providing you and then yield that actual element from the dom and you'll see that we're feeding it um my grid and looking back over here my grid so the id of my grid is a top level element for ag grid and the reason why that's important is because it takes a top level element and then in our logic here to get the ag grid data we're then querying for uh header cells and then we're also querying for all the uh the actual cells in the rows and then we're doing a mapping of what the headers are to the row cells and that's what's providing us with the array of data that we're getting from the aeg grid yep so all these selectors that you're using did you do that by reverse engineering from the dom or did you look at the theme and see what selectors edgy grid is using so yes i i looked at the dom i know that there are quite uh you know a select few different themes that eg grid has and i worked with two before in the back in the past um so i i can't say with 100 confidence that this will work for every bit of the theming i think that it's generic enough that it would work for whichever theme that you are um uh actually uh utilizing with your agent grid integration but do not quote me on that i can't did you use the theme documentation to find the um classes or did you reverse engineer it in the dom so yes i i looked at the dom itself i i did an inspection in the dom and uh looked to see how it was uh composed in there right because that's and that's where this becomes hard um yes because you're automating a third-party component and the it's pretty much the selectors used in the theme probably won't change very much um but you may have picked some that might change in the future because we reserve the right to change things in the middle inside in order to make it look better or whatever that's just one of the issues that you have when you're automating things can change but that's comes back to your earlier point of don't try and automate everything exactly we want to do as you know as limited automation against a third-party tool or plug-in or whatever we have as possible and you're absolutely right that is a limitation and it's a risk whenever we're doing this kind of automation because um as you said that can change at any given time and it might break what you're testing here um but luckily that's why we have this as an open source so anybody can go in there and update that at any given time which you have experience with you you actually did that's the only thing that i was contributing to this but that's good so you've essentially got um interactions and validations as the main parts of your abstraction layer exactly yes so we have this is all the interactions that we have with the ag grid you know gathering the data and doing any kind of manipulation we have you know our column header elements where we can uh do filtering on columns um we can sort the columns so anything that you need to do to actually kind of interact with it aside from anything that you have living within the cell so i mean if you have if you have links and and check boxes or buttons or whatever in the ag grid this doesn't really cover that this is more uh very generic you know i want to sort a column i want to filter by text um uh that's that's the high level of it or i want to gather the data from the table itself yep because unless you're actually changing functionality in the grid or you're some things are better off tested at a unit level if you're writing your own cell renderer you're better off testing that unit level whereas what you're trying to do is test it integrated within an application there's buttons and drop downs outside the grid they make things happen in the grid so you want to make sure that the stuff that's rendered in edgy grid is as you expect exactly that's that's exactly the point of this uh just making sure that the rendering is what uh i expect it to be um we've come up we found some interesting bugs when testing with this uh plug-in um for instance when we're doing sorting we found that the sorting that we were applying to hg grid did not really render the way we expected it to within the grid for example you know it took into account um uh capitalization so if we had something within the grid that was not capitalized it was pushed all the way to the very bottom of the results which is not expected and of course we caught that failure very quickly um that is a test that we could do probably on the unit level as well uh but it was not cut on the unit level so this was one win for the cyprus test cool so what do the validations look like sure so in the validations it's it's very straightforward you'll see that what we're doing is we're just using you know the chai assertions here um you know expecting table to be empty uh validating the exact order so that's just making sure that if you're testing sorting or if you need a very specific order um you know say you have like a hierarchy of data represented in a g grid you want to make sure that that hierarchy is represented properly um and then it gets a little more interesting as you get down here validate table row subset is essentially uh here's an array of data i don't care what order it is i just want to make sure that it exists or here's one piece of data i want to validate exist in the grid and and this one's the fun one this is the one that we we did the trial run of in the run over here where you can actually click through and validate paginated data which is notoriously fickle and a little bit scary to do when you're doing ui automation but i wanted to find a way to do that in a way that was uh stable and easy yep but what you're also doing is you're creating um high level function names that abstract away all the data so even though some of these um assertions are quite simple they're abstracted a way to make it readable so your tests now read well because of your abstraction there can we see where this is used inside the test yeah of course let's go ahead and check that out um so in the test that we were looking at here let's make sure that i re-enabled that check um and here it is what we're doing is we're getting that ag grid and then validating the patch needed data and all we're doing is we're sending it this array of expected table so what's interesting there then is one of the things that i found when i was looking at your code is cyprus is working in a different way than i normally expect libraries to work because you are hooking in your functions almost directly into cyprus as function names because that ag grid validate paginate table is not what your function is called so you've got a mapping somewhere is that how cyprus normally works yes so i mean what you could do is uh this originally existed as just straight up javascript code so i would call this function it wasn't uh it wasn't off of cyprus at all and then i thought you know i'm using this directly with cyprus it's kind of a one-to-one thing here um so i want to make it more intuitive for people that are testing with cyprus especially within my organization but then i thought you know on a larger scale i think anybody working with a g grid and doing cypress validation and testing uh could could find utility in this um and so what you can do with cypress is you can do extensions of the commands so you can override uh existing commands or you can create new commands that are then chained off of this cy command here and where that's done is if you go to support and you'll see commands aptly named you know here's where you would typically add it but i went ahead and put it in the index so i have a i have a higher level index here where we are actually syncing it to those commands and you'll see that uh we're doing a cypress commands add get ag good data and this previous subject that we're passing in this is just saying okay so this is going to be chained off of another cypress command and in our instance it's going to be chained off of that git command that is getting the ag grid element right that's really cool so one thing we haven't seen here that i noticed when i ran the test is it automatically created a video yes it did if you run it from within here it doesn't create the video so let's go ahead and run that but i was like magic when i saw that because that is that is quite a hard thing to achieve with other testing libraries it is yeah because you usually have to go ahead and configure that yourself to be able to gather these screenshots or any kind of video recording um and right out of the box you won't see uh the browser open up because it will run headlessly and we actually have a failure i think i might have forgotten to update that test but that's fine because what we could do is we can look at our screenshots of the failure or just click through so even though this was running headless it created a video of the execution so if this is running in the continuous integration server we could go have a look at the video and see what happened exactly and that's exactly where a lot of the value comes in because you know in ci it's a little bit of a black box you can't just go into the machine and see what's going on so what you want to see is the test running in real time and when you're watching the playback of the video you can uncover a lot of information that you may not be able to get otherwise from just standard logging or even just screenshots i can't tell you how many times that's been of high value to me and incredible use because something that runs perfectly on my desktop or your computer or anywhere else may actually have a lot of flakiness once you load it up into a ci pipeline and being able to view that video playback is going to be able to enable you to uh see where that flake occurs and make your test that much more resilient against it yep and you've got this available through npm now that's right was this the first thing you tried to put on npm i've never put ending on npm i don't know how easy or hard it is this is actually the very first time i ever tried putting anything in the pm uh and it was really easy so it's it's just as simple as running a command to um uh to upload it into npm uh so if anybody wants to download this or add it as part of their application it's just as simple as npm install cypress ag grid that's it and then it'll up that will go ahead and download the um the package uh the latest package that's available into your project and one of the cool things about cypress is it's installing everything you need at this point you don't have to go away and get a web driver you don't have to go away and get a whole bunch of other libraries everything is there at that point just ready to run yeah exactly you know in the past one of the challenges that i face and one of the ones that i want to overcome is to be able to enable feature developers to contribute to the test automation and be excited about the test automation that we have in place and uh it's typically been a barrier when they have a separate project that they have to go into or they have to learn you know what selenium is and how to load it up and not that there's anything wrong with selenium at all i i have such a soft spot for it and i've worked with it for a number of years but being able to have this live with your front-end project you know utilize some of the code that the front-end engineers or even you know so back-end engineers will be leveraging it just makes it more intuitive for them to go in know what the tests are doing want to run it and it enables them to get faster feedback on any changes or updates that they make to the code base themselves right that's really cool so are you still working on this you're using this in production yes so i am actually working on this uh as of today i've been making some updates to it so um one thing to note is as we discussed before right now this is just pulling back the data so when i get that ag grid data back it's it's just text you know it's an array of text with a header to cell mapping but i changed it because as we discussed you know ag grid is incredibly dynamic and you could do so much with it and and keep whatever you want in those cells you could have um uh you know you can have uh text but text buttons or excuse me buttons or uh check boxes or anything like that so i want a way to be able to um to interact with those as well so i'm looking at another iteration of this where instead of just pulling back in the text values i also want to pull back in the uh the elements themselves so that we can do any kind of interaction that's needed um so coming up next that's cool but that's you're you're expanding this because you need that in your testing and your work and if anyone else needs anything else they can contribute into the project absolutely yes and i've had a couple of people contribute already and it's been very helpful because they've had use cases that were covered by what i needed to automate um but it was incredibly useful and and hopefully other people find it just as useful cool so is there anything else we should cover before we finish i don't believe so i think that's about it um you know uh you interact with the grid you can validate the grid uh largely what you would need to do to test your implementation of 8g grid again is part here um but if it's not you know let's talk let's see if we can get more functionality into this plugin yep so where can people find you if they want to hunt you down and ask you questions i am i am all over uh you know i i'm on linkedin people are welcome to connect with me um i have a blog it's kerrymckeever.com where it's it's not as active as i would hope for it to be but go over it it goes over um some software automation uh that you know tips and tricks that i've learned over the years and just talking about software quality itself um i have a twitter account that i just do not contribute to but i'm on there and uh and then of course through github or email so you can connect through you can connect to me through any of those needs okay so i'll stick links to them wherever i put this video and and write it up so thank you for your time thanks for demonstrating this to us thanks for showing it absolutely thank you so much for having me i had to play with it i was able to use it that pretty much means anyone can use it so thanks very much thanks so much [Music] you

Channel: ag-Grid

Views: 1,840

Keywords: ag-grid, javascript data grid, react data grid, angular data grid, vue data grid, ag grid, javascript datagrid, cypress automation, cypress test automation, cypress gui automation, test automation ag grid, aggrid

Id: lL3e0wRBluM

Length: 34min 15sec (2055 seconds)

Published: Wed Dec 08 2021