 Welcome to Drupal South, second day, so today of me and Gaurav will be discuss how we can simplify Drupal testing using Cypress and Cucumber. So I know you all are working in Drupal, so but you can also use Drupal to build a complex website, but testing is always like I would say I can just blast my head off if I am going talking about the testing, so today we are trying to explore a new ways how we can perform the testing in Drupal. So our focus is mainly on Cucumber with Cypress, Cypress is a like another tool and Cucumber is also one more tool, so we are trying to achieve a new testing framework using Cypress and Cucumber. So for this presentation I will try to share as much as example and we will have a quick demo to understand how Cypress and Cucumber will work. So before going into the detail I just want to tell me about myself and the Gaurav will introduce himself. So I will working with Salsa, it is almost 6 years and I have around 14 years of experience in the web development and I am working as a technical lead in Salsa. In my professional experience I have done so many projects from the small website to a large scale web applications and right now I was looking into multiple aspect of how we can perform the testing in a various tools and technology, so this is this one is the like I got curiosity how we can use these front end framework in Drupal itself. So I will let Gaurav to introduce himself. So hi everyone this is Gaurav, I am working with Salsa from last almost one and a half year and I started my career when I started with Drupal 7. So like from Drupal 7 to Drupal 10 it's been already a long journey, it's already like 9 plus years and during this time I have worked on like various projects, the middle size team, large size team and different you know different kind of projects. Mostly like what I feel that I have also worked in Drupal migrations like from Drupal to Drupal or other platforms like Aashaya point and other platforms like that. So that's all about me, so continue please Gaurav. Thanks Gaurav. So today we have a small agenda to discuss, we will look into what exactly the software development life cycle and that how you can perform different methodologies for the testing. Then we will look into the introduction to Cypress and Cucumber, we will talk about the Drupal module and we will talk about the standalone setup of how Cypress and Cucumber can be used as a standalone application or as a standalone framework for the testing. So if you guys are not interested in testing I think you can leave, you can definitely leave for the may be there are other presentation you can you want to attend. So let's get into the detail. So first I will try to talk about the software development life cycle in agile way. I am also a certified scrum master, so I know how agile work in a normal every, so we are using agile but not a fully agile normally the hybrid cycle we are doing. So in agile as you can see there is a normal iterative approach you can follow, you can plan, design, develop and then test, then deploy, review and the another thing is launch. So if you look into the testing step, so the test is the one thing that we have to perform, it could be manual, it could be automatic, you can use multiple type of tools like B Hart is a very famous framework that you can use and the unit testing in BHP Drupal itself provide there is a unit testing framework is available, so you can perform for that. So in agile there are multiple methodologies to perform or to create a software, first I would like to discuss about the test driven development, I am now you all are aware about the test driven development, yes no I do not know may be I am not going into the much detail, it is just a context what exactly the TDD will look like, this is the flow, you can see the first thing you will write a test, watch it fail, write your code, minimum code, minimum necessary code if it will pass and then what will do, you will review, refactor your code while ensuring all the test will work. So it just the benefits of TDD is you will get the improved code quality, but the limitation is it always look into the smaller amount of chunks of like if you are have a function method it will apply on those particular unit of code only, it is not about the behavior of a whole application, you can write as much test you required for any application like if you are working on a Drupal module itself you can write whole lots of unit test that will perform for every function. So I am not going into much detail, but the another methodologies that we are going to discuss today would be the BDD, the behavior developed development. So this is the another logical step after the test TDD because in TDD we are not looking after any business perspective or end user perspective, we are always concentrate on a chunk of code if it is ok or not it is passing the test or not, but if you are looking into the user experience how the application behave at the end user it will the different thing. So BDD is also a agile methodologies that extend TDD by focusing the behavior of the system from front end user perspective. So the key component on this if you see the flow, so you can start describe the behavior it is your requirement or your user story, you write the user story then you will go write the step definition. Definition is all about like given then why you all heard about the user story how you write the same thing you can use as a your testing step or a testing criteria in that. Then write the test it will fail run and write your code and then it will pass you can deploy your project. So those are the two methodologies we normally using in our basic practices. Now I will talk about Cypress and Cucumber I did mention these methodologies because those are the things we are based on the Cypress and Cucumber is based on the BDD only and TDD plus the BDD. In the behavior user we always look after how the user experience matter if you are talking about a business requirement if you understand the business requirement and you can write a test which is normally any person can read that provide a good acceptance criteria over. So let us talk about the Cypress and Cucumber here, so what exactly the Cypress you will see test automate accelerate. So it is as simple as that you can write test automate it and it will work in any pipeline or something. So what exactly the Cypress is Cypress is a java base java script base end to end framework that allow you to write and run test in a browser environment only it provide you the cross browser platform testing you can run on any browser it does not matter which browser you want to use you can use any browser Chrome Firefox it allow you to like if you want to test your application in real time you want to time travel through the what exactly has been done so far while you are testing the application it provide you the snapshot of all the test cases you can easily travel like if you can actually save the video of your test like if it is just a browser if you are following your step manually you will go to the home page click on something and it will open another page. So everything will be done by the Cypress it will automatically open the browser and follow all the steps whatever you mentioned in your business requirement it can also possible to include in a CI or any pipeline you can integrate it anywhere and it will run whenever you push a new code. So why we should use the Cypress I would say there are few benefits you can see on the screen first thing I mentioned about the time travel, debugability, automatic waiting, real time reload, screenshot and videos and the consistent result. So what do you understand by the time travel that I mentioned you can easily allow user to see all the test whatever Cypress have perform you can easily watch your videos it will also allow you to because it is a javascript framework so sometimes it happen that application have some as x calls or something so you do not need to write a weight or something it will automatically weight browser to load all the required JS or CSS or all the DOM elements and then it will perform for the steps. You can also allow this application to real time reload because in real time you can just create your application and whatever you update in application it will automatically run test on the updated code. So these are the few benefits that we should be using the Cypress then we will talk about the cucumber. So in Cypress is a framework testing framework and cucumber is a tool that supports BDD practices it allow you to create a test scenario in a Gherkin language like given then and why similar to be hard if you are familiar with the be hard so the same thing you can do in the cucumber. So if you want to create a new things like in a Cypress with cucumber there is a plugin available that you can combine those so Cypress will provide a background application and the on top of that cucumber will create you the behavior driven developments. So it will allow you to create test in a human readable language and then the Cypress plugin it will automatically convert them into the Cypress available format and the all the test cases will run. So I will pass it to Gaurav to continue. Thanks Govind. So we already have a Drupal module for testing this like this is available for end to end back end and front end testing and the module is called Cypress in general like the other modules how we install it like using Composer and just download it and enable it and after that we can write our own module on top of it like in custom folder where we can like mention different folders there is a folder structure in Cypress how we can write the test I will show that in like you know in further slides but this is that will be the way of writing the test after that we have to add the dependency as well of the Cypress module that we need to make sure that the Cypress module is enabled and then like there is a module page which I will basically provide later in the references and resources links where we can be there is a readme file which can be followed and it has all the commands which is used to run the Cypress on browser on terminal and yeah but today we are talking about the standalone FES setup which can run like if we want to test only the front end and like site not the back end of it and we want to set it up so how to do that for any site. So if we do that there are majorly four steps first three steps are mentioned here first of all we have to basically create the package.json file by doing npm init it will generate the package.json file for us after that we have to install Cypress so there is a command npm install Cypress save dev and then it will install the dev dependency in the package.json file and the third one which is the most important is Cypress cucumber preprocessor. So like Govind already explained that this is the preprocessor which will actually convert the jerkin language written statements in the executable Cypress code which can be installed by npm install save Cypress cucumber preprocessor. And the fourth step is about creating the cypress.config.js file where we actually write the base URL like what is the base URL of the site we want to like you know run test on and then the folder structure like it's mentioned there is SPEC pattern where you'll find the feature files where we actually write the code and after that the view port width height so base in this testing framework we actually can see the test running on the browser right so the browser will open so we can actually decide the height and width of the browser like how it should look like in my system and other few like attributes are passed here. So this is how the folder structure looks like first of all we have the test folder and then Cypress inside that we have few folders like fixtures integrations plugins and support each of them have different roles in the like you know Cypress so fixtures where we can use the static data so let's say there is a site which is like dynamic and the data is changing like every time when we run the test so our test will always fail like let's say if we say that first test is this is Gorub but next time when I load the site it's it's changed to this is Gorub one so the test will fail right so we have to write stuff basically a network response and write the static data so that every time my test will pass so this is where we exactly do that then the integration where we run the actual test then this screenshots folder gets automatically created like when we run the test all the screenshots of the different pages get stored in this folder a plugin is to basically like modify and extend the internal behavior of the Cypress and support basically if you want to add the custom commands that can be used across the site so this is how the folder structure look like if you move to the next slide yes there are few commands which come out of the box with Cypress I've categorized them in three different ways first is parent command child command and the dual commands so parent command is about like see why dot visit if I want to visit any page then see why dot get if I want to get any data of any element in the DOM so similarly like this in child command see why dot click if I want to click on any event trigger find and the dual commands which has see why contains wait if let's say after a request if we visit any page we want to wait for five seconds or two seconds so we can mention see why dot wait so it will wait for till that time and after that it will run the second command so this is how it works few examples for this the first one is so in general we write it like this create a board given I'm on empty home page and similar like very much similar to other tests in jerky language and in the back end what is happening that I'm on the empty home page so it is actually going to the home page see why dot visit so this exact command will be called similarly others few other examples if we talk about the data driven example we can pass the arguments like board name and later we can define the examples like board name is shopping list and rocket launch so the same set of commands starting from three to seven will run twice because we have defined two different like values for these variables and it will check both the tests and it will run differently like the if it can happen that for the first one it can pass and for the second one it can fail working of array if you want to pass the data in array like milk bread butter jam so this is how in the back end it is done it can it is very much customizable we can write any you know logic and we can do any statement and it will work accordingly hooks can be used there are four major hooks here before before each after after each so for example if you want to run like post statement before any statement so this is how we define before and then it will always go to API reset it will send a post like request there always before running any command and then if instead of before before each then it will run before each statement do similarly after and after each test tagging just like other test environments we can tag our test so there can be any number of test and if our test certain test is failing so we can tag it and we can run it like high tag equal to and whatever tag we define there like here with it is defined smoke so yeah so most important thing is how we actually launch the environment so there are three basically different commands first one is NPX Cypress open so NPX Cypress open is used to run open the browser which actually opens that Cypress tool and runs the command so NPX Cypress open and NPX Cypress run run will run in the terminal one more thing I want to mention is that we can also define the configuration variables where base URLs can be defined with the user name and password so from the local code base any environment which is production known production environment can be tested directly from the local environment code base so sometimes it happens that like the test was passing in my local environment but it is not passing on the production environment so this is how we can test it that why it is not working on the production or production so let's go to the demo here I have set up a local environment which has this home page and then there is a view which is created with articles page it has three articles now there are two environment one is Cypress one just to showcase how to generate the files it test folder Cypress folder is there now let's run the commands so there are three commands which I mentioned npm in it npm install Cypress and cucumber preprocessor so after running this and fourth step I have already generated which is Cypress.config.js file just to save the time while generating this it will ask for package name and other sort of information I am just choosing the default one downloading the node modules yeah just to save time I'm just so package.json has their dependencies created Cypress and dependency as Cypress cucumber preprocessor Cypress.config file is already there let's go to the so this is the first feature file which I have written has three tests first one is about test login URL with user authentication second is I'm passing the argument as I showed on the in the example the URL is the home page and the articles page and third one just to show that if it test fails how it looks like so the fail test user login is directed dashboard it will open up a browser Cypress tool it ask for browser which one to open so I have chosen Chrome the base URL which we set there is coming up and the feature file which we created is coming here let's bypass so we can see after clicking on first feature all the tests are running here on the left hand side and on the right hand side it is actually showing the browser how it looks like that it is entering the things you know the fourth one is meant to fail so it failed here so it says cross right so we can see that three tests are pass passing here and the fourth one is failing in the second one it ran two different tests even though we wrote a single test but the arguments were passed to twice so it showed two times and the last one is if you want to run it on the terminal how it looks so npx run npx Cypress run so it will directly run it here instead of going to the browser we can see the similar result the first three are passing and the fourth one will fail so that's all these are the reference and resources like we have followed I would say like we are working on some automation of like how you upgrade your Drupal sites automatically so we are planning to achieve this because we can have these set of rules using these user stories like we can create a these kind of test and if these tests automatically pass we will trying to deploy everything on production so that's why we are trying to get customer on board on these type of things so they can understand okay these are the test have been passed and then we can also showcase them okay this is the whole report you can see what exactly happened in while test has been run so it provide that capability we can share the video we can share the screen short and they can easily read it see I have also seen some somewhere that it doesn't sometime respected so if we say then and if we write when then also it works sometimes but in general like when we write the step in the back end code we actually mention that this will this command should run only on when so we mention when and then bracket and then write everything inside so this is how we generally do it it's similar to be hard in some way try to typecast it you know bind it more similar to be happy yeah so the first thing there's a module available in for the Cypress integration yes this month the full definition that you are expecting the all the test I am aware that you did all the traits for the different kind of steps and we have so similarly it's it's still growing is still evolving so maybe we can do similar stuff on that but it actually the other thing is it depends on a browser it's a mostly browser specific Cypress it front end technology framework it's not a back end they provide us API integration as well so you can perform all the things that you are doing in be hard in any way so if you are trying yeah you can you can do that there's a commands available if you use this module yeah you can yeah yes you can use that yeah you can because it's a module available you can integrate it there's a command to perform yeah yes this command is available on that you can extend that for you yeah but we also provide a standalone framework because yeah