 Hello and welcome everybody. As I said before for the newcomers, this is a workshop, so you're supposed to use your laptop and solve some exercise that I'm going to propose. It's longer, so it will end at 12th and quarter past 12th. If you have any question please, you can interrupt me and we can try to solve it. Okay? So welcome. This workshop is about B-hat and Drupal for acceptance tests. My name is Ricardo Sanf. I'm a Drupal developer and DevOps. Personally, I really like free software and weird music. If you want to talk about weird music, I'm your man, so you can ask me. You can find me on Drupal.org as Tunic and I'm one of the founders of Metadrop, a company based in Spain that we all need to Drupal and we love to solve complex problems. And that's why we need a lot of testing to be sure that everything is always working properly. Let's see the world through of this session. The first thing is the workshop prerequisites that you need on your laptop to do the exercises. Then we will see a very fast B-hat introduction. Does anybody know how to use B-hat or knows about B-hat? Okay. And then we will do the exercises. So the prerequisites, you will need Git, Composer, Prolly make to do some commands, Docker and Docker Compose. Docker Compose released the V2 recently. I'm sorry about the tool I'm using. It's not compatible with Docker Compose V2, so you will need the all Docker Compose plugin and this is the thing that you need to run. So you need to clone this repository because here we have a super environment ready to be used with B-hat. So you have to clone this repository, run Composer install and then run this assistant that Composer boilerplate assistant and answer some question that the assistant asked you. Just do what we are going to do is to install the umami profile, you know, the demo Drupal profile, because we are going to do the test on that profile. It's... Anybody has any problem to see the URL? I'm sorry. It says Drupal Camp Spain, but because I did this workshop in Drupal Camp Spain, but it's correct. Okay. I'm sorry. It's a little bit long. I think it's good to do this now because you have to download some containers and you may need some time. So while we... Well, I introduced to B-hat. It's nice that the computer is, you know, downloading things and doing everything under the hood. By the way, I'm sorry, but this tool is tested on Linux. I'm not totally sure it's going to work on Mac or Windows. So you may have some problems if it's not working. You can solve the exercise with me, with the people that don't have any laptop. Does anybody need more time to clone the repository and run the commands? So I wait a little bit. Okay. Okay. It's been 10 minutes. Are you going to continue? Okay. Okay. Let's go with the B-hat introduction. B-hat is a BDD framework. That means a behavior-driven development. It's what you do is describing a behavior that it's automatically tested. You do... What you do when you describe this, you are writing acceptance tests using natural language. This... It's great because it allows you to kill the ambiguity because you have to write all the steps that the user should do to achieve a functionality. So what does describe mean? It means that you are using user stories. Anybody knows what is a user story? Where is it? You may know. At the end you are describing a functionality from the user's perspective. And this is written using the Gherkin language. As I said before, it's using natural language. We will see an example. Here is a user story using the Gherkin language. As you can see, we have a title. Then we have a short description of the user story. In this case, we are... This is a user story to allow a user to search the site. And after the... Below the description, we have two different scenarios where we describe different ways of doing the functionality. In this case, the first is just a... Regular standard search. The anonymous user goes to the home page. Then in one field, search... Types a string and then just click the search button. And as you see, the test says that there is a string that should be displayed. In this case, the example article. There is a typo, sorry. And the second scenario is an error where the user tries to search but there is no search terms type it. So the user should see an error saying that the user needs to write something. So this is a user story with two scenarios. And as you see, each scenario has steps. The gherkin language is what you have seen. It's used to write the user stories. It's organized using feature files. Each feature is inside one single file with multiple scenarios if you need it. Each feature has a functionality. And the functionalities are described or tested using scenarios because do you remember that you write in natural language but this is translated into actions, I mean into real testing. Each scenario is composed by steps. And there is the first word, as you can see, given when and then. It's not important for the test. They are only there to make the test more readable because one of the most important things is that this should be readable but non-technical users. What does automatically tested mean? It means that each step is technically mapped to actions. Each actions are PHP functions. And that means that its function can do many things. But usually they use a driver, a VHAT driver that gives access to the Drupal. And for example, the good driver what it does is to request some URL and checks the response. Or you can use Selenium 2. In this case, you have a full couple browser that requests pages to the site. And then you can test anything on the response. But in this case, Selenium 2 has support for JavaScript. So you can test things related to JavaScript or things. And also you have, for example, the Drupal API that allows you to run functions inside the bootstrap Drupal. So it's very handy to, for example, create content or to do other checks that are not easy to do using the Drupal interface. There is the VHAT extension. This module is a Drupal module that extends the VHAT and provides steps to use with Drupal. For example, accessing the site as a user or user with a role, etc. Or creation of content, status message detection, etc. We will see examples during the exercise. So just later it will be clear. Also the VHAT extension provides support for Drupal concepts like region detection on the theme. Or to detect if the user is logged in or not. And also you have the VHAT context. VHAT contents are the standard way to extend VHAT. The typical use is adding new steps. Like, for example, steps related to Drupal messages or the batch API or for the boot and purpose. Or something related to forms. At the end, because you want to have the tests to be readable by any technical user. But you many times need a step that is clear. In the sense of someone that is not a Drupal developer can understand it. But under the hood it does something related to Drupal like doing something complex. And that is the introduction to VHAT. As you see, it is very fast. VHAT has many things to offer. But the idea is to learn VHAT or to get familiar with VHAT with the exercises that we are going to do now. Anybody has any question or something? Yep. Does any of those extensions generate the PHP functions or have them out of the box? Or do you always write them yourself? Thank you for the question. When you write a step, for example. If you go here, we have different steps. Those steps are already in VHAT. But if I write a step that is not in VHAT. VHAT will detect that it doesn't know that step. And it can create a boilerplate code for the function you to write it. So, you don't need to, because the syntax can be not clear at the beginning. To relate one step to the function that executes that test. Inside the function, you have to write the actions that VHAT should take. This can be tricky sometimes, of course. But the good thing is that there is a lot of code using VHAT. So, there are a lot of examples. And there are also a lot of context available that make it very easy to make the test. Or even to check how some steps are done. It's okay. Any other question? Okay, so let's go with the hard part. The exercises. So, let's go with the Intel setup again. To make sure that everyone has their environment running. Then we will receive a new project. Then we will write accept and test. So, let's go. VHAT sometimes can be a little bit hard to setup. So, we are going to use Metadrop's boilerplate that it's a tool that provides you containers. It's based on Goodby. It has PHP, Apache, Selenium, anything needed to work with Drupal. And also with VHAT, because it's pretty configured. So, it's the same slide as before. You should clone the repository, run composite install. And when it's done, you should run the assistant. And when it asks questions, you should go with the default. But you have to select to install the umami profile. And at the end it asks about creating a sub-theme. It's not necessary. So, it's okay for everyone. Once you have the site downloaded and the system run, you can use these commands to control the containers. So, for example, I'm going to show you. This is my environment. It's okay. You can read it. Right? So, for example, if I check the... This is the URL. So, I can go to that URL. Well, it's this one, but if I go again... Oops. Okay. So, here I have my containers and I can do, for example... Well, I can bring them up. If you have run the Drupal Assistant, you should have the containers up and running. And you can, well, stop and remove completely. And also you can run MakeShell. Oops. Sorry. If you run MakeShell, you will be inside the container. Okay. And here we can run uh... VHAT commands that it's... They are simple. You have just VHAT to run the... All the tests. You can run VHAT DL to get all the available steps. And you can run only some tests that are tagged with a certain tag. We will see there later. So, for example, if I go here and I run VHAT, it should start doing the tests. Okay. Something important is that this is the repository you have cloned. As you see, there are many different tags. Now you are probably in the Drupal branch on the top. Well, it's an initial commit because it's an error, sorry. But as you see, the last one, almost the last one, the solutions, is where you have all the solutions. So, you have to check out the User31 Exercise Tag. So, you start in the first exercise. Okay. If not, you will be able to see the solution. And the idea is that you try to solve by yourself. Okay. So, we are in the repository. We check out the first tag. I mean the first exercise. Okay. And then, let's see. Well, first we receive a new project. And I don't know in your case, but sometimes you receive information like this. Like we have a project for our recipe website where users can see what recipes are available and search for them. We will need to categorize them in some way. We tag something similar. It should also have another content, blah, blah, blah, blah, blah. And a lot of information, not really structure and with no totally clear requisites. This, obviously, is a problem because when you have to develop a site, you need clear requisites and everything should be clear for you and for the person that wants the site. So, you need to write the specifications. Okay. In this case, we, as you may have supposed, this is the umami site. That is a recipe site with different recipes. So, we will have recipes and articles. We will have lists of recipes and articles by date. We will have search functionality, editorial workflow, related articles on each article page, homepage with a bit of everything. So, these specifications, obviously, are better than the previous one, but it's not totally clear. So, what we have to do is starting writing acceptance tests. And the name is because you agree with the client on the test. So, the idea is when all the acceptance tests are green, are running okay, the site is, can be considered done. The good thing is because the tests are written in natural language, you can talk with your client directly on the test. Even there are some clients that can write their own tests. That's something that's not very common, but I have seen it and it's great because they are forced to decide how the site will work. Because, I mean, you can't be ambiguous with these kind of tests. So, it's like a double win because you have the automated tests, but also you kill the ambiguity and have clear reggaets. So, let's start with writing acceptance tests. So, to write a test, you have to add a .feature file, where in a folder called tests functional, BCHAT features umami. Okay, you can go to that folder. In my case, if I go there, tests, functional, BCHAT, features and umami. Okay, so here I only have one file now. That will be my first test. Okay, so if we continue, we go to the first user story. That's a very simple user story that is that the user should be able to view a list of recipes. For this, I suggest these steps are given I'm anonymous user. Then there is another step that it's given I go to a certain path. And I click a text to click. Okay, because the idea is because the test should be readable by any people. You don't use like, for example, CSS selector or something like that, but you use real text that you can see on the website. And then you have a step to check the result. So you can use then the I should see a certain text. There is a file called recipe list feature that if we check it, as you see, it's just the beginning of the test. You only have the feature described, but there are no steps. Now you should start reading your first test. And I'm going to remember or remind you how you should do it. This is an example. Here is an example. So you start, you have, we have the four first lines. And then you should start reading, writing a scenario and a name of the scenario. And then the steps. What you should do is just take this file and edit it. It's clear. Do you need more information you want to try or do you just want to see the first solution? Anyone wants to do the exercise? I give you some time. Anybody has any problem running the environment or the setup? Okay, let's try to solve this exercise. So the first thing that we should do is let's see what we have to do. Let's back to the first exercise. So what we have to check is that there is a list of recipes. If we check the site, this is the site that we want to test, the Umami profile. We can see that the recipes are here. Sorry, I didn't bring up my site. Okay, here it is. So this is the Umami profile. If we go to recipes, we see that there is a list of recipes. So let's see how to solve this first exercise. Let's go to the US one solution. And if we check the file, now we have a new file that it's called recipes feature solution. It's a different one because I didn't want to override your work when we change tags. And if we check it, this is the test. As you see, it's very simple. We first create a declaration scenario with the first lines. I mean, the content, recipe and US one is just the tags. So you can reference the test when you want to run, for example, only the test rated to content. And then we have the steps. What we are doing is first declaring that we are the anonymous user. Then we go to the homepage. Then we click recipes. As you see, if I'm the anonymous user, I go to the homepage and then I click on recipes like a normal user. And well, this is not the homepage, sorry. I go to the homepage and then I click on recipes and I see the recipes and then how we check that we are in this page. We use the steps then I should see and different texts. In this case, it's important to note that when you do the real tests, you shouldn't use the real content of the site because the real content of the site is going to change very often. So you should use pre-created content or something like that, but this is not the scope of this talk. I only wanted to introduce you to PiHAT. So if you are using tests on your site, don't test the site with the real content. So as you see, the test is very simple. Any question on this test? Okay, then let's go to the second exercise. As you see the user story too, we want to access the feature recipe on the homepage. If you check this, if you go to the site, there is a big hero content with a feature recipe. We want to be sure that that content is always on the homepage. How we can do that? Well, it's very similar to the other test. The suggested steps are the same. I am the anonymous user, I go to some path, I click something and then I should see a certain text. You can do the exercise using the next tag, this will be this one. Use 2-exercise. If you go here and you list the files, you have a new file that is the feature recipe feature. If you read it, you have the same as before, the initial lines of the test, but you should complete the rest of the test. Does anybody want to do the exercise? Can I give you some time? Or still? That's why I wanted to download it in the beginning, because maybe it's a long thing. By the way, before continuing, I'm going to show you how the tests are run. This file, it's the first test. I'm going to rename it. I'm going to use the feature extension, because that's the way Bihad detects the tests. Now my test is ready to be run. If I run Bihad, I have to do inside the container, I forgot. Now if I run Bihad inside my container, it's running the test. Those are some basic tests that are already in place to check that everything is ready to run Bihad. This is the test that we have just written. As you see, it automatically connects to the site. Click on some link and checks that the result page has that text that we have declared here. For the second story, we can go to the next solution. You go to the next solution. We have another file with the solution. As you can see, it's very easy. I'm an anonymous user, I go to the home page and I click on B recipe and I should see two strings. Super easy vegetarian pasta bake and also pasta bake is the ultimate comfort food. If you check the site, this is the feature recipe. If I go inside, I can see the strings that I have declared on the test. This is the title and this is the description of the recipe. Remember that if you do this, you have to use content created for the test. Not real content because it's going to change often. As you see, the first and the second story are very similar. The idea is that you get familiar with Bihad. The third easy story is to access a home page article. This is very similar. The user should be able to see an article on the home page and access it directly from the home page. This means that going to the home page and see an article on the home page. We see an article. We see that there are articles here. We can test that the user can see this. The steps are more or less the same. I'm the anonymous user, I go to path, I click on something and then I should see some text. See this exercise. This one is the same as before. We have the first lines of the test. An article in the home page. As a visitor, I want to find and see an article in the home page so that I can learn about topics related to recipes. I'm going to the solution directly. As you can see, it's kind of the similar as before. I'm the anonymous user, I go to the home page, I click on view article. If you check here, it's like I go to the home page. I click view article and I can see the give your oatmeal, the ultimate makeover and other strings that are what we have declared here. I use some tags to classify them to be able to reference the test later. If I want just to run, for example, the test related to content or to articles. Then let's go for something, another test that the user should be able to view an article including tags, related articles and breadcrumbs. For example, when we go to an article, we should check more features. In this case, not only the content or the title, but the breadcrumbs or the related articles. The user should be able to view an article including tags, related articles and breadcrumbs. The steps are more or less the same. The anonymous user, I go to some path and I should see some text. How we can do this? I'm going directly to the solution of this exercise. What we have, as you see, this is the article view feature, article view feature solution. This is a little bit longer, but as you see, what we do is I'm the anonymous user. I'm going directly to an article because I want to check the article. Then I check many text that should be present in my web page. The title, the description, some tags. For example, the breadcrumbs is here. As you see, home articles, daily free. Sorry, let me check because I'm not sure. Big and vegetarian or breakfast. Here should see tags and big and chocolate. Those are the tags. As you see, at the moment we have done very simple things, just accessing the site and checking texts. But what are the issues with this user story? One of the problems is that the exact text of the breadcrumbs is not clear or is already present on the page. What I mean is that here we check for big and chocolate. If you check here, probably big and chocolate is in another part of the page. It's not clear that you are really testing the breadcrumbs. Also, for example, I can test that there are related articles, but how I can test that the article itself is not appearing in the related articles. Because if I check for this title, this title could appear on the more featured articles. There is no direct way to detect that the same article is in the featured articles. So that's why we are going to introduce the fine regions of the theme. So you can declare to Piha the regions of your theme and then you can test things only on a given region. So, for example, in this case, you have to go to a certain Piha Jamel file where you configure the Piha. And then, as you can see, there is a property called region map where you can declare the different regions. What you do is just to add a name for the region that is produced inside Piha and then the CSS selector that Piha will use to detect the region. So, for example, in this case, the content region, it's just the element that has the class region content. This allows to create steps that are more precise. So if we come back to the yesterday's story 4, we are going to improve it with more steps. In this case, we are going to use the should see and also the I should not see. Because we don't want to see the title of our article in the related articles. So if we go to our code, we go to the next exercise, use 4bk, the file is article view improved. Okay, article view improved feature and the exercise is just the introduction of the test. So let's see the solution. So what we are doing now? We are using more or less the same steps at the beginning. We are the anonymous user. We go to the article, then we check some text, but in this case, we are using regions. In this case, for example, we say I should see the home in the breadcrumbs region. So this is the first component of the breadcrumbs. In this case, it's more clear. As you see, we have home articles and daily free and delicious milk chocolate. If we check the site, the home articles and the type. So this way we can be much more precise, as you can see. And also, we are going to check the content more precisely in the content region. And also, we are going to check for the more feature articles. In this case, in the site bar region, so we can check that we have the title. So the more feature articles is here, more feature articles. And also, we can check that we are not going to see the title of the content that we are currently seeing. We don't want that title in the feature articles, so we can use it. I should not see a certain text in the site bar region. So this allows you to be much more precise when you want to check your site. Okay, so let's introduce the next functionality of Drupal that is using the Drupal API. What we have done until now is just to query the site and do checks on the site. But many times, we need to do something more complex on the Drupal. For example, making changes on the site, or creating a user, or creating entities, or running cron, or whatever we need. So what we do in this case is to add in the API tag to the scenario. So in this case, it means that the Drupal API is used by APHAT. This means that the APHAT can run PHP code in the context of a bootstrap Drupal. So you can do anything that you do in your modules or code with Drupal you can do using this driver. So you can create content, run PHP, do anything that you want. The only limitation is that the APHAT needs to be running the same context of Drupal, so in the same machine or in the same container, of course, because what it does is to bootstrap Drupal and run the code. So to test this, we are going to write this user story 5. This user story is to access a recipe creative form. In this case, only the author user should be able to access the recipe creative form. Of course, no anonymous user, for example, or other kind of user. So in this case, the steps that we should use are this one. For example, I'm logged in as a user with the role. In this case, it will be editor, of course. I will go to a certain path because I'm logged in with the user with a role. The next steps are done with that user. So they just go to a certain path and then the user should see something and it should not see something. And you have to use the API tag to this scenario. That triggers the API driver. So let's check this case. Let's go to this exercise. This one is recipe creative form access. This recipe form access feature. This is the proposed test. As before, we have the feature describing the user story and then the beginning of the test. In this case, we have the tags and as I said, we have the API tag. If we check the solution, this will be the test and what we have. We have different scenarios in this case. So which is the first scenario? The first scenario is accessing our recipe creative form with an author user. An author user should be able to access that form. So given that I'm logged in as a user with the author role, I go to know the recipe and then I should see the create recipe text and I should not see you are not authorized to access this page. And the big hardware it does is in the first step, when it says I'm logged in as a user with the author role, it creates a temporal user with the author role and it logs the browser in using that user that has been created. So the next request to the Drupal will be with this logged in user. So you can start checking everything with that kind of user. We should check that the author user is able to do what we want but also we have to check that other users are not able to do that. Well sorry in this case, first we are going to check that the administrator user also can do this. So you see it's the same test but with a different role. And the other user, like for example the editor, the editor doesn't write articles, it just checks the articles. So the editor user should not be able to add a new recipe. So we have a test for that scenario that we log in as the editor role and then we go to know the recipe and we should see that the user is not authorized to access this page. We do the same for the authenticated user because the authenticated user, yeah? Probably you don't need it because if you see the created recipe, for example here, if you see the created recipe text you probably are in the edit form but in this case I wanted to show the different possibilities and also it's a way to be sure that you are in that place because maybe you have some text that matches what you are looking for so it's good to test a few things. Keep in account that this is very fast because at the end what it's doing is just checking the output of the web server so it's very fast. So as I said we first check that we have access with the proper role and we check that we don't have access with the roles that are not authorized. As you see it's the same but with different roles. And in this case you may see a problem is that we are using the same scenario but with a slightly different change. In this case for example we have the same scenarios but the only difference is that the role that we are using. That's not very dry, okay? So we are going to introduce something to fix this. That's reducing the test because the tests are very repetitive and only some parameters change so we can reuse tests. We can use the scenario online and as you can see what we can do is to use parameters on the scenarios. So as you can see we have an example and an scenario where we have two steps and those steps can use the values that are declared here. So we create an scenario and then we use some variables that are populated with the values of the table that we have below. So let's see an example with the same user story as before but using a scenario of lines. Let's go to this. Let's see the solution directly. Let's see this one. So it's more or less the same as before but in this case for example the access recipe creation formed with an authorized user we are using it for the administrator role and the author role. It's more or less the same but the only thing is that here in this step that I'm logging in as a user with the role whatever this variable is a place but those two values. That means that VHAT under the hood is going to run this scenario two times but with different values for this variable. So what we achieve is that we don't write the test twice but we run the test with both of the roles so we are sure that it's working for those two roles. We do the same for the roles that should not be authorized. We use the same scheme. We use the scenario of line and we use two roles the authentic user and the editor user. They shouldn't be able to access the not add recipe URL. Let's continue. Let's check how to use a complete browser because what we have been using until now it's just only HTTP request and process the result but sometimes you need a full browser. With VHAT you get this using the JavaScript tag. So if you add the JavaScript tag to a scenario JavaScript capable engine is used. It usually is for example Chrome with Selenium 2 so it's great because you have a complete browser and you can do a lot of many types of checks. For example this is required if you want to check things like the Cica editor because Cica editor is based on JavaScript so you need to have JavaScript available to test anything on the Cica editor. We are going to test the recipe creation this is going to be harder of course because we have many complex well many fields that we have to fill so those are the steps that I suggest for example I fill some fill with some value I select some value from a select list or for example scroll into a fill this is important because VHAT checks even the visibility of items so if you try to access an element that is not visible VHAT is going to complain and this is good because it's important that the user is able to access an element if the element is not accessible is not visible the user is not going to be able to use it so the test should fail. So in this case because the form is long enough we may use the scroll into fill there is another step that it's called filling in the rich text editor because we are going to use the Cica editor and also we are going to use a media it's a complex step because we have to upload an image make it available and select on the interface because if we do the assigning a media to the form manually with steps it's going to be very cumbersome so we have a step that does it for you so the test is readable for any user let me show you the form that we are going to test so if we go here oh the URL is not correct but I can fix it if we go to add a new content we are testing the recipe right recipe creation so we are going to test this form we have the name we have a language, preparation time, cooking time we have text fields we have select we have a media field we have a Cica editor field as you see it's not super complex but it's not so simple as the beginning let's see how we solve this let me go to that exercise this was the six I think let's see the solution directly so how we can do this well we start with our scenario then there is a step that it's called given file with name this is a long name and that file and then the next step is that there is a media entity as you can see the media entity at this step is using the image that we have declared previously so what we are doing is creating an entity a media entity with this file this is required because we are going to use that media in the form so what we do as you can see the test is readable so what we do is we are using we are logged in as a user with certain role remember this is a scenario line so we are going to test this with two users the administrator and the author so we go to the recipe written form and we start filling the different fields for example the recipe name or the preparation name or the number of servings as you can see we are using the labels of the fields you go to the form as you can see we are using this label why because obviously it's more easy for any non-technical user to read the test if we use these labels if we use anything more technical we will break the purpose of making the test readable for any user so fill the different fields select one element from the select box for example it says medium from difficulty so this will do go into difficulty and check in this case medium we can select easy, medium or hard whatever but as you can see we are using always we are using text that are available in the page we avoid any technical string then we scroll to the direction field that's because the direction where it is the direction here it's down below so we need to scroll and this is then we use the rich text editor step because it's a secret editor and we need a special step to do this then we assign the media that we have created before that means this step what it's doing is going to the media clicking here and selecting one of the images here that we have just uploaded ok and at the end we press save and we check the result we check that there is a string saying the test reside because this is the title of the reside that we have just here we see that this is a summary because it's what we have just here ok and you can see you will see the recipe directions and because we have used it here also for example something that I forgot to add probably is to check for a text that says the recipe has been created don't remember exactly which is the way that Rupal said but you can check that kind of text ok the steps the thing is that I forgot to show you the steps if we go to our container and we run the the BL command we can see all the available steps ok as you see there are many of them obviously you will probably not know them by I mean you don't have all of them in your head but for example if you want to something related to Chrome you can read the result and you see that there are different steps to run Chrome Elisa Chrome search API etc or if you want to, I don't know something ready to fill you can check and you have here all the different steps as you can see the steps some of them use some like expressions because the steps are kind of flexible so you can write the test in a way that is readable for users but yeah if you want to know which steps are available just run this command and you will see a lot of steps that you can use in your in your tests sorry should we use the the microphone sorry can you go to the microphone if you want you can ask me if it's not too long I can repeat on the yes usually the all the steps that create content that are a step already created I mean steps that are provided by the different vhat contents that are available usually they delete the content if you create the content manually for example going to for example in this case the media is created by vhat it's going to be deleted but the content that we have created using the form because you have created by using the regular standard form vhat let's say it's not it doesn't know about that content so it's not deleted so that's why you shouldn't run this test in an environment that should be not polluted at the end the environment can be polluted ok so let's go to the next functionality that it's creating custom steps as you can see we have a lot of steps but sometimes you need to add a specific step for a project to simplify repetitive actions of for example to maintain the variability of the tests for example for example in this case we want to add a new new vhat what we are going to do is going to a file that is called feature context that you can find inside the code base and what you do is to create just a function ok we are going to see it and here you declare the step the text that it's related to the function ok so when vhat in context something like this I do something with an argument vhat calls this function ok with the argument as the first parameter vhat uses mink to use the browser you may know mink because it's in core, in tuple core it's used by the web test class to handle the browser but it's something that they have borrowed from vhat so if you use the api tag inside that function you can use any function of tuple core or any function of your tuple model or whatever it's available to tuple and obviously you use php to run this so for example in this case we are going to create a custom step that is when I go to recipe list why because we want to keep the test very clear so for this what you have to do is to go to test functional vhat feature context and add your new step there so for example what we are going to do is let me show you we are going to the sorry solution 7 test functional vhat bootstrap here is the feature context here is where you can declare your own steps for your project because if you have different projects I mean if you want to reuse a step for different projects you should use a vhat context but in this case we are just using adding a new step and this is the step I go to recipe list the text is very easy I go to recipe list and when vhat encounters this it will run this as you can see here we are using code this is some function provided by mink in this case we go to the home page we get the session we get the page and inside the page we find a region then we have an object if we don't find the object we don't find the region so we throw an exception if we have the region we look for a link that is called recipes because we want to go to recipes a page that recipe so with this code we have created our custom custom step and we can use it on our test if I go to see the available steps now it's here so I can use it in my test for example if I want to check something about the recipe list instead of adding I go to I click on recipe and go to that page I can just use this one single step to make my tests short and readable that's all for the exercises I would like to add some references here you have the vhat official documentation it's very interesting a lot of information there also in this setup I have used two set of context one is from Nouvelle it's a a company that provides vhat context that means a lot of steps that you can use and also our own vhat context from Metadrop that it's an extension of Nouvelle we provide on top of that so using these two context you will have a lot of steps that will make your test much easier to create and also this is the dropout boilerplate it's a tool that we have created it's based on goodby it has containers for running dropout and it's nice because you can just run a command and you will have a local environment with Docker and vhat pre-configured as long as along with other tools like backstop.js but the most important thing is that you will have vhat ready to play with it because as I said before vhat sometimes is hard to configure so at the beginning it can be a little bit frustrating but using this you just run a command and you will have vhat ready to run ok so that's all do you have question? in your scenarios you used way more annotations besides from api what does the other annotations mean because in the first scenarios we got no annotations and then there was the jump with a lot of annotations yeah those annotations do you mean this thing right? yeah those are the tags so the scenarios are tagged with those values there are some tags that are just simple tags that they have no meaning it's a way to reference them and what I mean with reference is that if I run vhat vhat is going to run all tests but I can say ok I only want the I think there is a content one so now vhat will run the content but only the content scenarios I think that there is no content sorry so some tags are just for tagging and other tags some background like the api one exactly so there are some that they have just tags but the others for example the api or javascript they obviously you can run only the javascript for example test but it also has a meaning that in the case of javascript it's using a real browser or in the api is just to have the Drupal api available yes thanks welcome can you talk a little bit about like you already have a project you already have a project and then you want to integrate this in an existing project how would you do it how would you set up it you should be able to do this because at the end you don't need to change your site at all to require some composer packages the functionality of your site should be the same and maybe add in the feature context but it's a class that is only used during the tests so your site is totally untouched it's the same so it depends on the case but I will prepare VHAT to be run and then start covering the site with tests so you have to add the composer dependency for VHAT and then to install VHAT you have to require VHAT itself and the configuration of VHAT is here here we have the VHAT Jamel it's a jamel where you configure a lot of things as I said it can be hard to configure so that's why I recommend that boilerplate and here for example you declare well VHAT has switch you can have like different set of tests here are all the context that we are using and the configuration of those context for example there is a context related to responsive that allows you to test the things in different resolution or screens for example there is a debug context that if there is an error you can get a screenshot so that's very handy because you see an error in your CI and sometimes it's what has happened and it's nice because you can check the screenshot and you can see exactly what happened extension I mean as you see it can be a little bit complex that's why I recommend to start with something that it's pre-configured but what you have to do is just if you want to add VHAT you will have to require VHAT on PHP sorry in Composer add this VHAT Jamel and the feature context that it's well you can start with an empty one and finally does VHAT has any kind of report generation yeah if I run VHAT it starts to run the tests and in this case at the end you see that it has run two scenarios for steps and everything is okay if it fails I think it returns an error on the command and you can export the results in a format that CI can understand so if something fails CI can detect the problem okay thank you great workshop any other question what is your strategy with content when testing content like in the workshop you took the army but in a real project we just dump all the content and then start we don't do that because for two reasons one is because of the content is not stable so it may change at any point without any notification and also because we have some project that they have a huge database so it will be not practical to import 10 gigabytes of data you can do some tricks like removing some tables or do that kind of things but at the end it's not ideal we will have problems at some point so what we do and it works very well and we use also in the local environment we have a command that spin-ups the site from a local configuration so it creates an empty site but everything is configured because we use the configuration system of Drupal and then usually you use the default content model that when you enable that model it automatically creates a set of content so what we have is a brand new site with just the content that we need to test the functionalities this is very fast it's very stable because there are no changes and really if you for example have problems because there are some test that fails or there's some situation that it's failing because of the content for example you have a long test or whatever you can just add a new content and default content with that that kind of content so you can test that situation and that works very well for us yeah please so I have a few questions first is I was a little bit confused how this media yeah can you talk a little bit louder thank you I was a little bit confused how this media entity has been created could you elaborate a little bit more about that where we can found some documentation how the syntax looks like for that because it was a little bit confusing okay the media step is the most tricky one okay it's the most complex because you have to create the media under the hood and then select it what we are doing is we check the steps here let me go there tests functional we had features okay it was the media one was the creation of the recipe that's I think it's this one yeah we use several steps the first step is given fillet with name whatever this under the hood creates a file for Drupal then in the next step we create a media entity using the Drupal API here we are not using the edit form we are creating the entity directly using the Drupal API and what we do is referencing this file that we have declared before okay so at this point we have already a media uploaded to our site and it will be available on the Drupal interface and then we have this step that it's called I assign the media with the name blah blah blah to that fill internally what it does this step is to go to the really what you will do as a user it goes it looks for this button it clicks it and then looks for the media that it should be available in this list click it for example this one insert select and now it's ready that's why for example in this case you need to use a complete browser because obviously with good you won't be able to do this so that's why I recommend to use the context that I I mentioned before because those contexts provide that kind of steps that are very complex because the big head extension is the Drupal model that it's contributed it's I mean it's good it's a very good model but it lacks a lot of steps because at the end there are so many things that you can do with Drupal that obviously they can't cover everything so it's described in this context on how the property should be created if I describe those context like what they do I'm still not 100% sure how I would be able to use them how I can use that property which property I can pass and so on how you can use them I'm sorry I don't hear you well yeah I mean I'm still not sure how I mean I understand what happened under the hood but I'm not sure where I can find the guidance in the documentation or the files which properties can I use in which syntax and so on how how to use the context in the syntax sorry because they are talking in the other session and I I'm hearing like the voice we can speak up anyway I think it's late yeah I'm not going to take much time after the session we can talk I have just one more question do you have any like a pre-baked docker images that will allow us to run Bihad test with Drupal in CI CD like do you have some good examples how to use Bihad with CI I mean I'm strictly looking for useful images do you have something what you can recommend I mean we use Bihad in our CI with the containers provided by this boilerplate so we bring up the containers and run the test and it works pretty well I mean we have a Chrome container a Chrome Selenium hub and some other setup but it works pretty well okay thank you thank you yeah I think it's super late I'm sorry ah okay okay I was going a little bit faster okay so we may have more time I mean it's super long okay so I was wondering if there is a way to execute some things right before running the Bihad that's a good question because there are there is a way to execute steps before each scenario it's called scenario background I didn't add to the workshop because it was already too too long but you can declare steps that are run before each scenario inside a feature if you remember there were some features that have several scenarios so you can like prepare each scenario no I meant like at the beginning before running any scenario and in the end like hooks for example before any scenario yeah I was thinking that maybe could be nice to like for example do a site install an important configuration and then use that to run the different scenarios with a initial point already for example install a site with a certain configuration you can do that but you shouldn't do with Bihad because at the end Bihad just is testing a site that is already prepared in our case what we do is we create I mean we spin up the site and create the site and prepare the site and then we call Bihad that kind of big configuration you should do before Bihad what you can do Bihad has some hooks so you can run some PHP code for example before any step or before or after any step or scenario or feature for example I don't know one of the things that we do is disable or touch the cookie banner because in a site with the cookie banner is very annoying that we have to click every time that you are running a test so instead of polluting your test with the action to click that banner we do before each scenario yeah yeah yeah thanks for sharing this one basically in my previous project I'm using this particular Bihad Bihad you are using Bihad so we have like thousands of the test cases already written and we are using the Chrome driver to running this test and we continuously sometimes when we have like long running test and then it will be timed out every time and we did not find any solution for this do you mean it's a timeout when you access a page or a timeout when you are running the test for hours or something like that yeah for longer running tests we don't have the problem maybe because our test they take at most one hour and half maybe something like that it's true that sometimes we have some issues on the system in part will say so we have to deal with the containers but so far we have always found a solution but it's true that we don't have test running for hours or something like that so I'm sorry I can't help you the last question like can we also integrate the J unit in this particular Bihad what thing? the J unit for making the HTML report PHP unit no no J unit J unit? it is a kind of ah yeah sorry I mean I don't say that in English so I'm not used to the pronunciation I think that it can export it as with that format but I don't really remember let me check because maybe there is something here related to that the outs maybe the format I think format the J unit ah here it is I don't remember exactly what format we use but it's integrated in our CI and the CI it's aware of the tests okay thank you so much thank you thank you very much for coming and for staying all the workshop if the workshop is prepared to do the exercises that was the original idea so if you want I encourage you to clone the repository and do the exercises at home because I think it's very ah I mean you will really be familiar with Bihad it starts very simple and it gets complex at the end okay so thank you