 I'll post the questions after the chat as well Everyone should see my screen and I'm gonna be talking about Cypher's Iotips entry. Oh, that's the wrong title Let me fix that No project plan, that's automated testing. Okay, let's go. We didn't see anything. No Because I can cut it. Here we go. Today, I'm gonna be talking about Cypher's Iotips Let's start from the beginning Okay, do let me know if you lose the visual audio and I'll switch off the video if it's not working So quickly, my name is Vladimir I'm architect and Drupal developer and I'm passionate about number of open source tools that I contribute to including GitLab and Drupal So today we're gonna talk about browser testing So because of the number of people, I'll just do a gentle introduction to what browser testing is What sort of technologies we have available as Drupal developer or any other developers? What Cypher's Iot is? Why is it the same as some technologies and where it's different and we'll attempt to write the test So let's do that. So first When you Google Cypher's Iot, the first thing is Popping up. It's a test craft. In fact, they are marketing as a Cypher's Iot alternative So if you use test crowd before You might want to add something in there because I never used it. That's the only time I saw test Craft Iot, but again, that's the first alternative that actually saw when I was Talking trying to find some information about Cypher's Iot Probably most of you who work with Drupal know be hat. So it's a behavioral driven Framework for PHP and you can and when we talk about behavior, we'll talk about the user So the user doesn't see your tags. The user doesn't see your code All user C is the browser window. They go to some page and then they click around So Yeah, so and that's exactly what we had was doing and it's written PHP. You can write tests in PHP So I think it Drupal 8.6 was released Night watch JS was added as a testing framework So the difference between this testing framework in we had that this one is actually completely written is in JavaScript you do need to do npm install night watch and Then as you can see here on my screen you write some JavaScript and that's what you test and again this on this website You can see it's called end-to-end testing but behavior driven testing end-to-end testing. It's all the same thing And it tests basically what user does. So if we quickly look through this example It says a browser go to this particular URL Wait for body Make sure the title contains that text and so on and so forth So you actually test them the user experience rather than the functionality as opposed to unit test which test nuts and bolts of the actually the Infrastructure your code here. You're actually testing the end result with user C and once you go to a cypress home page It says the web has evolved finally the testing has to and it's been true it's been quite tricky and cumbersome if especially if you're not developer to to Set up the testing framework actually right for testing framework again because usually if you write code or test for testing framework in Probably 95% you are a developer So with the Cypress I found it's quite interesting because I use night watch for Maybe four or five years now I did couple of presentations on night watch and it was interesting to see how the thing evolved then kind of stop for a bit and now it's Picking up the interest again So I heard about Cypress here and there I saw the presentation at the meetup recently the JavaScript meetup And I decided to give it a go and see if it's different or if it's the same like do actually need it do we even order to go and Do it so I did MPM install and it Installed Quite quickly although I heard some people were complaining that one of the downfall that they downloads a lot of stuff Could be I didn't have any issues with that so MPM install cypress It downloaded cypress and zip silos and finish installation So when it's finished installation is quite interesting. It actually downloaded the app So it looks at the operating system and downloads the app as well. We're gonna do that So the I did that earlier Late last week and you can see there is say it's quite up to date. There is zero zero vulnerabilities and Is there zero vulnerabilities and yet so do it install nice and quick So on the website they say, you know, it's Those two things it's installed a cypress test runner and you can write tests locally and It also You can build the suit of CI test running for your continuous integration somewhere in the CI as well You can record them and gain a powerful insights So Just to compare with the night watch for night watch if you're installing it plainly your machine without any Virtual machine or anything you need to install a lot of tools. You need to install a browser plugins or browser runners You need to install Selenium connect them and then try Night watch to run it there are images available for Selenium to do that, but it took quite a while. So the whole setup process was very very complex This one was actually I didn't need to install anything and it ran pretty much straight away Which was different from any other framework I work with So a few other things that they mentioned is the open source So they are available on github and you can go and help them to develop the tool. It's developer friendly It's they claim it made specifically for developers and QA engineers But I think all the testing tools was developed for those people but I would like to see the tool that actually makes you know breaking the ground to the less technical markets and Build from ground up so you can actually go and research the architecture again the whole code for this thing is in github and go and check it out It's interesting to see the version so the tagging of the versions they do release every two weeks or so which is quite interesting So the version 4 was released on 7th of February and since then every two weeks there is a release. So they Yeah, they actually Quite up-to-date on Releasing the version so sometimes you can see frameworks become popular and stop as I mentioned before that happened tonight watch JS And the release notes are quite comprehensive so you can go and read what actually happened and which functions they have same as documentation So As I mentioned before it does have an app so apart from the installing all the code it Downloads for my mac os and don't load at my course app And it does the same for Linux and does the same for Windows which is quite interesting I found and it does Help quite a bit especially for people who never run tests before so And Also the another thing once you run the Cypress open It opens this app and the app downloads the basic code and it has a lot of examples here So you can actually go and check out the examples and for the testing I found that examples are crucial because so rather than you sit in there spending your time on GitHub comments on Stack Overflow the good examples really do make difference especially when you're writing tests. We all know that the Stakeholders or clients don't really like to pay for the tests. They think them as an extra So if you check few of the testing that actually show them that it works, they might be a bit more Prone to actually pay you for the tests or actually make sure that you do test the release So I found there are quite a few good examples that you can actually quickly put together without spending a lot of time and Show your client. I mean for the organizations who run Test driven development. It's not an issue, but if you're just starting or if you build in a small website It's quite a complicated. You need to invest significant amount of time to build the first test So and that's how it looks. So you basically in this app you go click on the test and it runs the test. So and the Different the different thing between with Cypress is it opens the browser you select It has a selection between Firefox and Chrome And you have the whole log on the left-hand side and it actually saves the history and It also records the video. So you don't need to set up anything. It's already does that in fact If you don't want to record video, you have to say don't record the video Yeah, and It also just the last thing last plug before we go into live demo example is It does have a sling plugin. So for people who is doing JavaScript LinkedIn or a sling team So it's they also provide the sling plug-in. So it does look nice and dandy Although they are standards to differ from Drupal quite a bit. All right, let's do a live demo So as I mentioned before Let me know the text is not You get enough That should do it So I just had the package to Jason and the only dependencies I have is this is sling plug-in and The Cypress itself. So if you go and PM install Cypress, it's gonna do that Well, I already installed that the next thing you run is Cypress open if you didn't run Cypress over before It's gonna verify the app for Mac in my case I'm gonna do that and PM from So I open I'm gonna tell you what we're gonna test today. So while it's opening Doing that what we're gonna test is It's gonna be Okay, so this is the app and it's open and you can see there are a number of examples here So you can go and search for particular examples Yeah, what nice so we'll open the first one called action click on it it opens the Chrome and This is the interface. So it's actually runs the test on the left-hand side and you can see the test Going one by one and what it does you can see the timer how many tests pass how many tests fail And it goes it and test actually example the Cypress.io and you can see it goes for each test So this is one cool thing that I haven't seen before with the testing frameworks I mean, we all visual people if we'll spend a lot of time in the code, but the good another cool thing is so once each test Ran you can actually open it up and go back in the history so you can see Which particular DOM element was selected Each particular DOM element was selected by This action. So we'll see the example with Drupal where the same I think we have a similar same IDs on two buttons and it's gonna click their own button In fact now thinking it's the actually bike so you can see where they type and click And so on and so forth so you can actually visit the particular test and see what happened So I thought that was pretty cool Okay, let's quickly write a test then and do A Drupal test so I installed Drupal 9 beta 2 is available. So if you want to help test it It's already there Okay, so I Installed you mommy installation profile you might be installation profile. It's It's installation profile that supply with Drupal 8 and Drupal 9 just demonstrates the different features So what we're gonna do? We're gonna go load this page Log in here and try to Make sure you they can see a login form and then click a login providing their own credentials So let's do that. Okay. So to quickly write the test Here, I'll just copy one of the examples So it's easier. So inside Cypress it downloads all the test examples that we saw so inside Cypress Integrations, I'll create a folder called Drupal and zero and inside there. I'll just copy one of the Piles and the Drupal all again So before anything happens, I'll just remove all the tests. So it doesn't look very Easy Okay, so now we have Drupal login test Which is a function again if you're not familiar with a modern JavaScript? Format just yeah, just take it. But that's what all the tests are written in and what we're saying Here is before each test Cypress visit particular page. Our page user URL is Drupal and zero you dot local Now we are ready to write the test the right test is easy or you just write it Then actually description of what's happening go to login page No parameters And just right Here you go. So we have an empty We have an empty test go to login page. So now if you go back to our app If you go back to our app, you can see the test is already there So if we click on it and see what's gonna happen So it tries to go to this Triple page and that's it. So it visited the page and go to login page as you can see when we Open it up. It just visits the page and that's it so Do that. So the next thing we do is we'll try to Write something so Output something like Cypress log Testing login and functionality would test that It's it would actually automatically Re-test So it does watch so you can see it here it logged testing login functionality So just as a log. So the next thing we do actually Let's click on login and to do that We'll just to log in in the top corner. So if we look at our page Started so if we look at our page, there is a login We'll try to click on this particular thing and in Cypress. It's quite easy. Just say sci contains We'll deliberately misspell login and Try to do click Let's see what our test does And we can see our first error so contains login timeout retry and expected to find content login But never did and now We'll put this space that we expect and You can see we already on login page the test pass So all assertions fell and we can go back in time and say, okay, we went to the page We output something we found the element that contains logging in and then we did click Okay, that was quite successful. So We can check a couple of things on the next page. So, for example here text contains And make sure we'll find some text. So for example here and per your your mommy nine Zero username. That's how we call the website So Let's say it's a good line to test. So we'll just test some things So it's already passed Well, we'll switch in between the browsers and it found it and you can see once I hover over it you actually see It went to the element we wanted to so there is no incorrect selection Okay, uh, that actually that command is equals to You know, your Moco Chi kind of notation where you say should and then you say for this particular case be Visible Oh, that would give us the same result So we know there is a net there might be an error that is Invisible at the moment so we can actually test the error that is that the error is invisible So here's our example we do fake effect.com Okay, so and we'll wait for the error message And their message actually says unrecognized username and password From here, we go back to our test and we say Unrecognized username password Not be visible Okay so that Let's see it and it's already did so it says Unrecognized username password is visible if we'll keep it is not visible if we'll keep it visible We're obviously going to fail the test There we go Exactly as I wanted so it couldn't find so few things We wanted to do is actually fill in with a fake name fake password and see if this error message appears So for this case now now it's not a text. It's the actual element So here what we can do we can go and say Cypress yet In Drupal in this particular theme Now we can actually use CSS DOM elements. So here Edit name and then we say type type and we'll fake email And that will type in our name and we'll type fake password to edit us So now let's go and see if it's going to do that We still have visible error We'll try that So you can see it actually filled in we can go and trace how Clicks through and navigate and the last thing we're going to do is go and click the button So for that we'll just do Click man and I know the button ID is edit submit and let's see what's going to happen So it goes clicks edit submit and it says please enter some keywords so obviously It in fact here it did fail But it did fail our test because if you look at where we clicked we actually clicked at search Button because for some reason it has the same ID called edit submit. I'm not sure if it's a bug, but I thought to HTML elements could not have the same ID So that's what I found while I was preparing for this presentation So two things to do so to actually fail the test we need to make sure that this fail Air Is visible so that's actually going to fail our test as last time we didn't so it would wait click on the search button And then actually give us an error so that would fail our test And the last thing is actually click on the correct edit submit button So if we look at which form the monster And it sits in the form this class user logging for so if we'll use that Hopefully it works I did so now it clicked On the correct button So I can close down this up Actually before I do that I just quickly navigating through the app to show you A couple of features. So as I mentioned before we were testing everything in Chrome it also has a beta for firefox and you can if you're testing your web app inside the mobile app You can also test electron here There is other features, but I'll just leave it for you. So the idea was to actually show you What it is and why is it different from the other testing Frameworks so let's wrap it up Here is my presentation Okay, if you have any questions just type them in the chat and I'll read them Once I finish Okay, so quickly to wrap it up. So we actually look at the what browser testing is it's something that you actually resemble a user Commands and user operations rather than what application does We'll look at the different technologies. Well, I'm already included with a Drupal or something very near Drupal like we had or a night watch We'll look at the cypress. So itself and so how is it different than we wrote our first test with trying to log in and so Some interesting things So I will post the links For that and there is more there is an interest in Presentation called cypress best practices if you want to dig a bit more deeper into the cypress api And do we have any questions? Hey boba You Yeah, I quickly have a question for you Hey rookie Yeah Yeah, that's that's the cypress can test the sort of ui elements for example like When you go to this login page Your h2 supposed to be you know like 18 pixels or something like that That's a good question. I don't know Okay, uh, it does though in It does uh embed Stuff like jQuery. So if you can test it with jQuery if jQuery can return you the real size of the If jQuery can return you the real size or the current size of the button Uh, then you will be able to do that Yeah, because the most of the tests are failing from like ui perspective like in in in practical cases like When we design it comes like, okay, this this title is off by this much that sort of stuff You try to automate that that to be great. Yeah Hmm. I found with the content. It's very hard because it's not Always depend on you it sometimes depend on the client And sometimes sometimes client gives you a design With a specific length in mind, but then they go and actually Change change it So they for example, they design Page where the title supposed to be two lines, but then they go and put the title over three lines Yes, so yeah, it's uh, it's a balance between the proper content editing and test I'm not sure if testing is always the right answer here because sometimes clown would go and say yes In majority of the cases it is but in this particular case I want to put this big title and I had it a few times. I was like, well You know the trade-off Thank you anything else Plato, I had a question about uh cypress and I guess is there any set of standard Drupal tests Uh that you can start with rather having to reinvent the wheel. That's a good question. I don't know Well, we already wrote one that can be a good test, but uh, yeah I did a number of them for night watch and then actually night watch was embedded in Drupal There was extra tests as well. So if there is none, it's probably a good project to do something like that Okay, cool For people who know much more about accessibility than I am Is that actually a bug if two elements have the same id on the page? Yeah, I believe is Yeah, yeah, it's an issue Okay, so if anyone wants to erase that I'm not sure like it's a search block and a login block on the same page So, um, yeah cool. All right, uh Drupal has a function that is meant to generate Unique ID for them. That's what I that's what I thought because yeah, it would the IDs would be unique but in this particular case I was writing tests without trying to fail it and it clicked on the search button. I was like, um, that's interesting I wonder if it's a structural thing like one's in a block and one's in a Yeah, I don't know one one in a content block and one in the yeah search block But yeah, that's something to investigate. I literally found it like two hours ago Is it happening? Are we now mommy? Uh, uh, I didn't test the normal thing but that happened in you mommy login page Yes, so if you install you mommy, that's drupal nine, but I assume the same thing gonna happen. Drupal eight click login Um, yeah two buttons with the same id Anyone else Test for drupal. Yeah, I'll check it out if there is test for drupal because cypress was around for a while I heard about it for a while. I just never had a time to look at it well yep Will you use uh cypress over night watch mobile? Uh, it definitely looks like the case uh, because it allowed me to do in a very short amount of time Much more than night watch does I wouldn't say night watch is worse And especially if you have a night watch sweet keep using it. It's getting better especially once they hit version one I am not going to drop my existing night watch test. I had a few clients I'm not going to rewrite them in cypress. That's for sure. In fact, I actually want to see where both technologies are going I think night watch guys were busy They are swedish-based company and they were busy building their night watch cloud To basically make some money Uh, so it would be interesting once the cloud is launched Would be interesting if they focus back on the framework and try to get uh catch up to cypress But it looks like a lot of big companies already picked up the cypress So there is this momentum that might give cypress a big push But it's it's just an alternative that I heard for a while. I just never had the time to look at it So i'm just fascinated with how different it is and um, you know all inclusive including the app Which you would think it's not very You know useful until you use it So a couple more questions David, I wonder if cypress has any methodology for keeping the test in sync with complex changes throughout the application So it's if you write a good if you wrote a suit with a night watch eventually you would start pushing something um Into configuration. That's what I did including the function. So I created like droopalate login function Which would just you pass username password and it would go and log into droopal and do a lot of these small things Or navigate through droopal, but navigation was interesting because you would define menu within your Theme so it would be different for each project whereas droopal login would be the same And yeah, so eventually you would create that I guess practices or suites so you can quickly rename stuff in case for example in two years You decide to create a new thing Otherwise, it's all manual Search and replace So That you pretty much just have to remember to make the changes in both places Yep It's all about discipline in this case So actually structuring your dome to the point where you can easily rename it Either it's your configuration of variables or functions Like global functions configuration functions, whatever they are Okay Any Okay, so there is a link for cypress. So your opinion commands should Can you cypress to audit the site? What do you mean by audit? What sort of content does it have white? Do you have any more insight into the question? Uh, well like my problem with that frame I could run it over my title site and then find all the broken pages I suppose that's that sort of thing Yeah as far as on my html and find what's missing I think you can do what they don't allow you to do. So yeah, there is a section called A methodology or limitation something like that in the documentation. It's quite interesting. So they won't allow you to Do like data scraping so you can't scrape the data But in the same test they won't allow you to go to another URL. So let's say you're trying to, you know Uh scrape the website data For something particular that is not directly loaded. So you cannot just go curl and get the html You need the browser like that to wait until the data is loaded and then copy paste it So they won't allow you in the same test to go to the different URL if you're already on one URL. Uh, so there are There is a whole page about those limitations and why are they there It's actually one URL so so but um, but yeah, I think so it it forms its own dorm and the test within itself Yeah, so it's like a little browser going to your site, isn't it? It's like a little javascript browser. So what's the point of it? Uh, which one your your your javascript, uh, libraries, uh, opening your site or your page and finding It's you know goes to log in like a browser in a sense in the It's not it's not firefox. It's the same javascript browser. No, no, it's using so I was using, uh, chrome So, uh, we're talking about a few things here. So once we type, uh Cypress opened it opens the app. So this is a binary They open it and there is a binary for windows mac and linux. So this, uh, can you see my screen? Yeah, I still presented right Yes So this one it's an app It is actually an app. It's a binary you um Do that and uh inside it once you click on it it launches the uh, it launches the browser you you chose So either be firefox electron or chrome Does that make sense or answer your question? Yeah, so you say okay, that's it's normal It's like a little bot and it talks to your browser and then yeah, it sees what it does Okay, that that's right. That's right. Yep. So this one what I once I click on the test next thing is actually a chrome in Incognito mode and it says here chrome is being controlled by automated software So in case you write something nasty And it pops up on people's screen Chrome should declare that And inside here it has it's actually it has its own browser So it's like a browser within the browser which you can stop pause Go in time But the interesting thing you can because it's a still a browser you can still use something like development tools on it And uh, yep, so they open on the right hand side So this is chrome, but uh, you can also launch firefox or electron But they all control within this app So it's like an enriched browser, you know with your it's like this tool It adds on top of the browser. Yeah. Yep. It's a browser within the browser. Yes In this that's makes more what it's doing there for the bits change, you know Okay, yep, but it basically yeah loads your page whatever you specify and then just adds an extra development tools on the left And saving your history what you did as I mentioned before it also saves the video unless you specifically say in configuration that do not save the video