Drupal Core Testing With Nightwatch: Getting Up and Running

SPEAKER:
Yeah, let's rock and roll. Thanks everybody for sitting in on this. And take it away, Matt.

MATT:
Alright, I'll get started. I'm going to share my desktop because we're going to go through a bit of a training. So thanks for coming to Drupal core testing with Nightwatch getting up and running. So for those who don't know, my name's Matt Glaman, I have my own company, Bluehorn Digital. This is a recent change previously, you might have known me from my work at (INAUDIBLE), but I have started my own company. But today we'll go through running Nightwatch and when sharing, I don't think I can see people, they do the hand raising thing but if you're not familiar with Nightwatch, Nightwatch is one of the testing suites available inside of Drupal. We have PHP unit and we have Nightwatch. Nightwatch.

SPEAKER:
And Matt, I'll keep an eye on the chat if anyone raises their hands. And I'll just jump in if there are questions for you.

MATT:
Perfect. Thank you. So Nightwatch is an end-to-end testing framework, JavaScript testing framework. And some people are wondering like, well don't we have PHP unit and functional JavaScript test? The problem with PHP unit test is you have PHP installing Drupal inside the same site instance and testing it with PHP to test JavaScript. So Nightwatch kind of provides us a standalone instance where it's actual JavaScript being executed in the browser and it also makes it a bit easier to run. Functional JavaScript test are calling WebDriver or as many might know it Selenium. Selenium did become like an open standard known as WebDriver. And that's actually the same way that Nightwatch works, but you're just writing JavaScript. So it makes it easier to do several things. This makes accessibility testing and testing of themes a lot easier. The main goal for this, and then the follow-up session after lunch is to get ready to do contributions, to help Olivero, the experimental new front end theme, stable for 9.2.

I'm going to share a link for those who want to follow along. I have created a workshop repository and there's (INAUDIBLE). So if you want to follow along, some of it's located there and there is a correlating documentation website that I'll be working on to expand this for folks. So we're going to start by just going through how we're going to run, how you run Nightwatch and we're going to run it locally with DDEV and with Lando, if you do use Docksal or any other kind of like local setup, I picked kind of the most popular or the most common, when I say local this is something that will work if you're running nothing locally or if you're running MAMP or WAMP or any of the other, like we'll call them old school or legacy setups, the non-Docker. I didn't cover Vagrant here, so if you're using Drupal VM, it would basically be like running it locally, just inside of your Vagrant machine. So let's get started. Like I said, the first one I'm going to go through is local and the reason we go through local is it will walk through setting up our tasks and kind of explaining all the different configuration options that are required.

So when I say local, I mean it's going to be about as local as it can get. So I'll wait for the terminal to wake up. Oh, there we go. So for this, what I'm even going to do, so oh, one preface is when you are contributing to Drupal core, you will have like the full Drupal repo. This template set up is a composer built. So it'd be great for contributing to contrib projects, not necessarily to core, but I also wanted this to be a repo example for if you start adding these tests to your projects, every project I'm on has PHP unit tests. Like I do test driven development. All of my client work has test driven development. So this is kind of me helping share that knowledge as well. So the first thing we're going to do is we're going to start the local web development server. So for those who didn't know, PHP has a built in web server and you run it by doing php-S, then 127, then you give it a host name and port which I always do 127 and then 80, 80, and then 't' helps you specify a doc route.

But I realized since we're going to be running some tests that might need the router, we'll copy a script that core provides. So inside the core directory, there's actually a file called... Why isn't it here? Oh, sorry. It's not, when you're in the composer bill that gets copied out. It's called .ht.router, I actually have no idea what the.ht means. But this provides, when you run the PHP built in server, you can pass it a router script. And that's what the script does. It helps provide routing supposedly it works around a bug in PHP, and it just helps ensure that you can serve Drupal all over the PHP built in server properly. And they actually give you a sample of the command to run. So I'm going to copy that. And I adjust it. I've had issues where I specifically use the word local hosts. So I've gotten into a habit of constantly typing 127.0.0.1. In this case, it probably won't matter, but with some tools, it tries to connect over a socket versus TCP. So that's why I always use 127.

So we'll copy, sorry. And when you run this, you need to be inside your doc route. You don't want to specify. So with CD into web and now we've started the development server. So if I were to go to this URL, you'll see that we're at the Drupal install page. So not using Apache, engine X or whatever hosting thing. We're just going to use PHP's built in server for this. This is how I do my testing all the time, when I do testing for contrib or whatever, I'm always using the built in web server. So we'll get started on configuring or the next step for Nightwatch. So Nightwatch is well, there's actually testing instructions. So if we were to go to the core directory tests, then go to Drupal, sorry, it's in the read me. So the documentation is in the code. It could use some updating, I believe, but this insight core test, the read me file does explain some of the various configurations. We will need to run Chrome. You need to have Google Chrome or chromium on your system. And we are going to run Chrome driver, which you can download yourself or thanks to a dependency with NPM actually there is a version of Chrome driver available.

So if we go down to here, it will say running Nightwatch. So we're going to go through and we're going to follow these steps. So with the, we're going to let this PHP server keep running. We're going to go to a new tab and we're going to move into the core directory and run yarn install core does use yarn as the package manager over NPM. So you do need to have some understanding of the front end tooling. If you're new to some of this, let me get to the yarn website. NPM composer is the package manager for PHP. NPM is the package manager for JavaScript, but it never supported lock files. It now does, but it does poorly, in my opinion, and yarn was created by Facebook, Google and a few other companies, and is an alternative way to install your JavaScript dependencies. That's more reliable in my opinion, and that is the tool that core uses. So we've run yarn install, and now we need to copy the ENV example to ENV. And one benefit once we go through this is if you are using DDEV or Lando, you can have this automatically configured for you and just do copy paste and not have to rely on manually setting this up, but I'm making sure to go through the manual part so that you kind of understand what all the pieces are.

So we've copied ENV example to ENV, and this tells Nightwatch how to run. So we're going to go through and configure each one, the base URL. Well, we know it is 127, 8080 so we'll copy and paste that. The test database URL it's wonderfully pre-populated with SQLite. So you do need to have SQLite on your machine or, and a PHP extension, which should always come with, or you can point this to a local, MySQL database. I do all of my testing with SQLite because I don't have MariaDB or MySQL instance running out of my host machine. So in this example, we are going to use SQLite and the DDEV and Lando examples. We will use the database provided by those local development stacks. The Drupal test WebDriver host name, we are going to run ChromeDriver off of our local host. So this, you don't need to change when you're running it locally, unless you have like an external ChromeDriver. You just keep it set to that. It can actually run ChromeDriver for you. So, as I said, it has it as a dependency.

So if we look at the package that JSON into this wild, wonderful, JSON file right here, you see ChromeDriver as a devDependency. So you don't need to download anything extra, it will be there for you. So we'll leave it to auto-start true. So that way it runs the one that has been added when you do PHP unit and functional JavaScript, maybe you're going to run it yourself, and then you can set this to false. We'll explain that when we go to the DDEV and Lando site. Now, this is extremely important right here. Especially if you're running in containers, but you want to run it heedlessly. So we're going to uncomment this and you want these three parameters. I was working on this template earlier and I was hitting an issue where this ran. I wrote a blog post a year and a half ago to do this, and I couldn't get it to run. When you have a headless environment where it's like a Docker container, you need the no sandbox flight. So we're going to run our tests, both with, we're going to start our tests.

I have no idea what command does that. So we're going to copy this and to show you what this looks like. We'll pass it with no command. So we'll let it run in a headed mode. So it will actually launch Chrome and we can see the test run, which can be neat, especially for debugging. But also can be annoying because it keeps popping up and taking priority. So I always run my tests in headless mode, but since this might be the first time for some folks doing this, we'll run it in a headed mode or non-headless, and then the Nightwatch output, this saves various reports. You can keep it as the default. Same with the ignore directories, keep this as a default. The search directory customizes how tests are found. So if you were running your own client project and using Nightwatch, you would want to customize this to help find your root level test if they weren't inside custom modules or anywhere else. But we have Nightwatch configured, we added the base URLs, so now we can run a test. We'll run.

So when you run tests, you do yarn test Nightwatch and you specify different tags, or you can run individual tests. We're going to run against core or actually we're going to go with a quicker test. This project already has the Quicklink module installed, which was created by Mike. And it was my first time writing a Nightwatch test actually. And that's when (INAUDIBLE) dig through me go through how to write a test later on. So let's run a copy of this command and we will do...

SPEAKER:
Can you put that command in the chat too, please?

MATT:
Yes. So does yarn test call in Nightwatch? And if you're wondering where that even comes from inside the pack is .JSON in the script's definition we have test Nightwatch. So if you are using vscode, you could find it in the NPM scripts explore right here, test Nightwatch. Or if you're using PHPStorm it would show there as well. The only problem is you can't pass tag, so it runs every single test which you may want, if it is your own project. So we're going to do tag and inside of the Quicklink, just to explain how I know it's there. The test has a tags annotation that says Quicklink. So if I start it, it's going to take a little bit to run. And while that gets booting up, I'll explain what it's going through. So Nightwatch, even though it's a JavaScript testing framework, it actually executes PHP code on your host. Oh, wait. This version of ChromeDriver only supports Chrome 87.

SPEAKER:
You're getting an end to that. Go ahead, (INAUDIBLE). I said, I'm getting an error too, the session I created. Yeah. Oh yeah. I am getting the version 87 there. Yeah.

MATT:
Yeah. So

SPEAKER:
I ran into that while I was testing locally as well. And I had to upgrade the dependency to be able to get it right.

MATT:
MATT: This is where, alright. So how I recommended using ChromeDriver, I was hoping we could, I should have run through that first, don't. Because it's not going to match your environment. That dependency is pinned to the Drupal CI container, so you can download ChromeDriver from Chrome, I'll paste that link. So I already have this setup and this way you can assure you have ChromeDriver matching your version of Chrome and this, so you would just download it and you can copy it into your, so I usually download it and then I copy it into user/local/bin/chromedriver. I'm pretty sure you could do, if you're on Linux or Mac iOS, you could do brew, install, ChromeDriver to get it. So that's various ways you can access it when you're using DDEV and Lando. We actually mount it as a container, so you don't have to download it. So let's say that you had downloaded ChromeDriver. You're able to just type ChromeDriver and hit enter and run it as the default. So you don't need to add pass any flags to it.

There are certain flags you can pass, but you technically don't need to, you can work with the default. So to recap, we have our PHP server running, we have ChromeDriver running, now we're going to try to rerun the test.

S1:
So if we run it, Oh, you do need to go back into the core directory and run the test. So now that that's going, I want to show some of the innards of Nightwatch. No that's the test suites. So if we go to Nightwatch, OK. Launch. So it will, when you have it in non-headless mode, it will launch a browser. And you'll see a notice that says Chrome being controlled by automated test software. And now it ran through and it ran our test. It was really short-lived. So let's actually go run Chrome, but you'll see that we ran, we visited the test page and it asserted that the Quicklink library has been added. Let's tag core for something that might run a little bit longer but you will notice that it launched Chrome and there was a lag of time that it took to be able to show the page that's because, and the, that's the configuration. So inside the tests, there are various commands it runs such as Drupal install. And this actually executes a PHP code on the server to install the site. So the script ran installed the site, and now Nightwatch is going through and executing its various tests.

So it uses PHP to install Drupal, and then it logs in and does all the assertions inside of the browser instance. It's like here in enabled Claro and is working with the permissions form.

SPEAKER:
So Matt, I'm just jumping back a little bit. So I'm a little bit confused what we need to do to get ChromeDriver running. I did a brew install, ChromeDriver and I'm still getting some similar error messages.

MATT:
So you have to make sure you download the correct version of ChromeDriver for the version of Chrome you have.

SPEAKER:
Now the error message, yeah. So alright.

MATT:
So like in this, I have Chrome 89, so I would have downloaded this version of ChromeDriver. So you have to check what version of Chrome you have and then download that ChromeDriver. So as you update, as Google Chrome updates, you do have to update ChromeDriver. And whenever that error comes up, I usually just go in and re-download it. What error, do you want to paste the error you have?

SPEAKER:
Yeah, so I'm having a couple of different ones and the Chrome driver version when I'm in ChromeDriver-V is completely different. It's like 2.45.something other.

MATT:
Because that's the version of Chrome driver and the versions of Chrome driver are different than the versions of Chrome.

SPEAKER:
OK. So.

MATT:
Go ahead.

SPEAKER:
I'm just trying to figure out what I need to do. I can give you the error message that I have.

MATT:
Yeah send me the error message and I can help debug it. And it looks like we might be frozen a little bit or it's taking, so one thing it does. So this version of Chrome only supports Chrome version 87. So it sounds like you have an old, you installed with Homebrew?

SPEAKER:
Yeah I just did a Homebrew install right now.

MATT:
So I think the Homebrew install is behind because you received this version right here and you might need to go manually download one of these.

SPEAKER:
So I just download that and just override the binary.

MATT:
Yup so you can just download this and override the binary. This is one reason I do like running Chrome in a Dockerized environment sometimes because it will be a little bit simpler. Now I'm trying to figure out if this is frozen.

SPEAKER:
So I have Chrome 89 latest stable release for, I just downloaded the latest stable release for Chrome 89. And I just say Chrome, the drive around back 64, OK.

MATT:
And this kind of shows one reason it's nice to have the Dockerized set up.

SPEAKER:
Yeah.

MATT:
So you noticed like that took forever to run, right? Like that test was hanging it's because it installed the umami demo. Wow. And it did a really quick test, so it passed away real fast. So each test, and this is one thing we'll go through in the next session. When you go through tests, it executes this test site dot PHP script, which was added into the script's directory. Sorry, scrolling to find it. So what test site does, is it installs a bootstrap and it runs a symphony application. It's just like drudge site install, except it allows you to pass a setup file and the install profile to be run. So when you write a test, you have to pass it almost like a bootstrap file that says, OK, you've installed Drupal for me. I need you to do some post-processing to make sure that I can run my tests. And that's the main part of the second session this afternoon is great we've got tests running. How are we going to write our own setup files and actually create tests? And we'll review the quick link module.

And I have another custom one in here and we'll try to write some test for (INAUDIBLE). So go ahead, Mike.

SPEAKER:
So do you want me to hold it for questions for the end? I've downloaded the latest version of Chrome driver and it's doing the exact same thing. I don't know if you want to like go over all like everything now and then?

MATT:
We will go over it at the end. Visit is one that can be finicky. And I think this is proving the point of like, if you are a Lando-person or a DDVEV-person run it there and we'll figure out how to get the Chrome driver, because honestly it's one of those that I've just had it set up for so long that I don't know. I don't even remember how I installed Chrome driver. I think I just download the latest one and say giddy up. While we're going through this, try just downloading the latest version for 90 and see if it works.

SPEAKER:
I downloaded it for 89. Because that's the version of Chrome that I have, but I'll download 90.

MATT:
So we had a failure when running the test suite, I got a page not found. It looks like, and that can be one that can sometimes be a problem when using the built-in PHP server. I've had it where, especially when testing like the field UI, it breaks due to the length of the paths I've noticed. But we were able to get the test running. If I go back to this ENV file and I changed, I'm going to change that to false for the auto start and we'll modify the Chrome marks to be disabled. GPU has this is a sandbox. And if we run the test again. I've also had instances where tests failed when it wasn't headless. Like somehow me using the computer in the browser existing and being shown cause like weird side effects. So that's one thing too that's one reason I always like to run it and headless, I only disabled headless if I'm trying to like debug a visual problem that taking screenshots or HTML dumps doesn't work for. So as you can see, our tests are running and there's no Chrome that was launched.

So this will be written up as steps into this folder here, I'm into this locally. I'm going to copy them in right now since I was not able to do that before. So that way we can have it and then I'll dive into running it with Lando or DDEV, then we'll do Lando. So again, we did in one terminal window. We did CD web and then we did PHPS 1270 001-8080 and then to the router script. And that is what has been running over here. And then in another terminal, we launched Chrome driver, which was just a simple call, the Chrome driver. We I'll use air quotes for simple, since you could have conflicts with your Chrome version. And then you installed the dependencies, which you go into CD web core, and then you run yarn install and then run tests. And to do that you CD web core and then yarn test Night-watch and I'll add tags there for you default, which that is what is currently running here and going through the paces, it's not test it's tag. So let's, I'm going to cancel this. I'm going to close that tab and I'm going to cancel Chrome driver as you saw, we had some issues I don't know if anybody else was trying to run this along and had issues as well, but that can be the problem with having local services running.

So we'll start off with how many people use DDEV can you please click the raise hand option? I want to see if I see it in the participants. OK so there's a handful now I'm assuming the other half might use Lando or might not use anything. I know there can be quite the local development or over who prefers what.

SPEAKER:
I use both.

MATT:
SPEAKER: I use both to, I got, I am a DDEV person, but I got thrown onto a WordPress project that uses Lando. And just for the record, I think it's great that there are two companies that are building local development environments and trying to streamline this piece of this major component in our lives. And Blue Horn Digital is a sponsor of both organizations because I couldn't work if I didn't have either tool. So let's go to DDEV. So DDEV allows you to provide custom service definitions. And what that means is you can extend the default things that run with when you launch a DDEV site, because by default with Drupal, it would just give you the, the application container, which has PHP and node and on my SQL container and like PHP, my admin as well. So with this, we're going to create a Docker compose dot testing file. And inside your DDEV folder, anytime you create a Docker, compose dot, whatever dot YML, it gets in an added to the running services. So what we'll do is we're going to add, define a new service, and this service will be called Chrome driver, and we're going to use the Drupal CA Chrome driver production tag.

You might see on the web there's various documentation that points to a WebDriver. I think the image is web driver-Chrome driver. These images are the same thing. I pained Ryan Aslet who's mixed logic from the DA and the infrastructure team. And it's something about like the script when it was generated they're the same thing. So if you see either tag name, they are the same, we're giving it a container name to match the other ones where it's DDEV, DDEV site name, Chrome driver, and a few of the labels. So that way DDEV knows how to discover our container. This is all documented in the DDEV read the docs for defining custom services. So I will add this to the docs for DDEV as well. Paste that into here. So that's where we are running Chrome driver. We're not installing Chrome diver on our container or onto the app container because we don't have to. That's the beauty of Docker is everything is a service. We are updating the web service to link to chrome driver that way from the web container, we can do HTTP Chrome driver and it knows how to network and access it.

And now for the next step you recall, we went into the core folder and we had to copy this ENV file and configure it. Well, I'm going to delete it because we don't need it anymore. So I'm going to move it to the trash because what we will do is we're going to define it as environment variables on the web container. So you'll see here, Drupal test base URL, HTTP web, because it knows that the website is accessible from the web host name. We're going to pass the DB URL, which we will pass the database connection string for the DDEV database. Jack you're on Doxie this should be. So once we get into this territory, especially DDEV, it should be easy to copy paste visits, compose YML, Lando is different because they just have the Lando file. So the good news here is this file is a Docker compose file. So you can reuse it for any kind of Docker based set up that uses Docker compose. So you see the WebDriver host name that matches the name of our service up here. And then we're going to set auto start to false.

The Chrome has, basically everything we configure in that dot ENV file, which stands for environment file. We pass as environment variables to our Chrome to the web container. So that way it knows how to talk to the Chrome driver. So now we'll get back into the terminal and we're going to run DDEV start. In this example, I do have it taken care of some of our maintenance items or grunt work. So using their hooks after it's been started, I have it CD into the main directory and run compos or install. I then also have it run yarn install for Drupal core. So that way you don't forget about that. And this is used for PHP unit, which is outside the scope of this training, but will be documented in the full repository. So as you can see I run DDEV start, and now it's running yarn install for me. So that way I don't have to worry about it being out of date or forgetting. And once that runs, we'll run some special commands I crafted. So DDEV allows you to trade custom commands, which are just bash scripts that it can parse and lets you run DDEV my command name and they run in the web container.

We have a Night-watch command and this is just like a shortcut. So you don't need to run DDEV SSH CD web core. It just runs it for you. So at this we're able to run DDEV Night-watch as we did before we can do DDEV Night-watch tag core. And once this finishes installing, we will rerun it. It had to recompile the node modules because the operating system changed. It's a different environment. I did a yarn install on my Mac and then it determined that, oh, I'm an indifferent environment. I have to rebuild the modules that were installed as dependencies. A little bit it takes a while because it's running inside Docker for Mac and Docker for windows and Mac both have really bad performance problems. It's not Docker's fault. It's just containers don't run natively on those operating systems. So they have a virtual machine layer that is hiding in the background. And if you are curious about how to write custom commands with DDEV that is documented as well, just to fill the time while we wait for 20,000 dependencies to get linked.

I love JavaScript, Tulane what type con oh yeah. Container commands. So I'll copy this into those docs as well. That's in the read me, side so the read me, will have all these documented. So that way anybody can come back as a point of reference and you know, testing is my jam. That's what I really enjoy doing. And I would like this to be an open repository for more people to get involved in testing, because then you have good coverage and you can ship reliable code and you can contribute to core and other country by helping ensure test coverage. Man, this has taken long. So in the end, when you run this, it'll take you more time to get your dependencies installed than it will to configure DDEV and the services file. Now I realize when going into this. I didn't clarify that if you are using DDEV, you might need to have some knowledge of Docker. And I keep talking about a services file and Docker compose Docker compose is a tool with Docker that lets you compose an app. So you have these Docker compose files, that specify services that are run, and it will ensure that they all execute together and build a network.

OK, great so this is now run. So if I type, if I were to type DDEV, you'll see that my custom Night-watch command shows up here. And so does the documentation for it, which was parsed from the description and usages here. So if we type DDEV, Night-watch, I'm going to hit up to go into my history and we'll run tag core. So this is going to run the same thing that we ran locally. But with inside the web container and sorry. It's going to run it in the correct directory, it's going to run test Night-watch and we didn't have to type all of this. We didn't have to write DDEV SSH to get into the server. We just had to execute all of these. We just had to execute this custom command and it would run everything. And we did not have to configure the dot ENV because we provided overrides for everything right here. So Night-watch is going to read from the global environment variables added to our container. And no one had to copy the dot ENV file because let's say that you upgraded Drupal core to a new major version.

When you do that with composer, it usually deletes the dependency and then reinstalls it, which means this core file folder would go away. That means your dot ENV file that you so gracefully, crafted and spend time configuring, was deleted. There's ways to work around this to preserve it, but by putting it into your local environment variables, it helps prevent any of these files from being deleted. Drupal's this weird doc where our dependencies live inside our actual project files instead of off to the side. And we are requested to modify our dependency files for things to work. So I like putting these into the environment variables because then I don't have to worry about this file being removed. Now, if you are working on core, the dot ENV file is ignored. So you don't have to worry about accidentally committing it. But if you were working with your own custom project or your client project, I would put it into environment variables. So you don't have to worry about updating Drupal core and losing a file, or if you've patched core, every time that you install it, it gets deleted and re-installed.

Which means that that file disappears. I know that happened to me a lot with PHP unit dot XML, and that might be the most comparable situation for most folks. So that was one benefit of using the environment variables. So as you'll see we've got everything up and running right in the command. It is going through the Clara-audit, complete test, it passed. It's now moving to another one. And all we had to do was copy in and set up the services dot YML well sorry, I spent time earlier, but now all you need to do or anyone else needs to do is just copy this file and there'll be up and running.

S1:
There is a tool called quick sprint that DDEV creates and manages. Thanks to Mr. Radcliffe.

SPEAKER:
We have an issue opened to add this file so that we can automatically be scaffolded so if you are using the quick sprint, you'll have this available immediately and not have to copy paste anything so that will be a nice benefit for those who are sprinting. Yeah, and Jack so you had the problem with PHP unit that xml I have for those who are curious in this readme I go over a blog post on how I configure PHP unit that xml to prevent that from happening you just copy it into your project route and adjust some of the paths but i want to try to stay on topic here because I know I am one that bounces around quite a bit so I’m going to cancel the test because we've proven that this works. So now what I’m going to do is I’ll show off how we can do this in Lando. So, I’m going to run DDev power off. If you don't have the pleasure of working between Lando, DDev or with Pygmy or any of the other local development environments.

MATT:
Every local development tool has its own router which is what says hey you went to food.DDev.site it goes to this container. Oh you're on Lando, if you go to lando.site, it goes to this container. Both command both systems have a power off which stops all projects and removes the router so that we don't have a conflict because if you have DDev start and then DDev start and then you turn it off but go start a Lando project it complains that port 80 and port 443 are in conflict. So, I am very grateful that both have a power off command to make it easy to switch between projects that are using Lando or DDev. So, before I run Lando I’ll quick show the Lando file. So, Lando has a Lando file. It's using the Drupal nine recipe and I haven't using composer two. Unlike DDev the app server takes a more you could say like holistic approach or one that you would see in production where it only has Apache and PHP. You might even see, you know normally, you would have your PHP fpm service and then Apache to the side or Nginx to the side.

But that's going into dev-oppy things but for Lando the app server just has PHP and Apache. DDev puts its tooling also in the main server so as I brought up before Nightwatch needs to execute PHP code because that is how it installs the Drupal site and run some other various commands. So, you could add another service, a node service that has PHP. I started with that but then you have yet another docker image or container running that you don't need to and yet another image I luckily now have two terabytes on this machine. My last MacBook had 256 gigs only and I was in a constant battle of docker images eating up my disk space so the easier alternative is to just add this build as route option route or route depends on where you're from and run the node install script which is luckily two lines of code and then we install Yarn as well. So, this way our app server container has node available and then in our build we run composer install and then also yarn install just like the post start commands in our DDev.

This just gets everything set up so if you did want to start working on some contrib tests you could just use this template. And then we specify an overrides. So, with Lando when you have a recipe you provide overrides to some of the services. Now in the end this gets mapped to a docker compose file with Lando abstracts it more than DDev does. So, it looks the same but it's not the same. And again, we basically copied everything over we did some modifications. You know instead of web, it's app server because that's the name of our app server hostname. The DB URL when it's the recipe, based on the Lando recipe or environment you have set up it gives you different database names. So, the DDev it's always d-b, d-b, d-b, d-b, just d and b across the board. With Lando it's Drupal nine for the username password and database name. I'm pretty sure if you use the Drupal eight recipe, it's Drupal eight, Drupal eight etc. We are giving it the same hostname of chrome driver cause that's defined below.

Again auto start false. Chrome AGS is the same. So pretty much the same setup, pretty safe. You know, in the end, it's just Docker. And to add a custom service, you'd under your services, collapse app server. So, under the services key, you define chrome driver. It's type compose. This is documented inside the Lando docs. So, if but if you're familiar with Lando, you probably know what this is. We specify the same image. And one thing I found out cause this kept crashing is when you define a custom service with Lando, it always overrides the entry point. Now, if you're not familiar with Docker, every Docker image at the very bottom of the Docker file says what do I run, you specify a command and that's what it runs and the Docker image lives so long as that command keeps on running. Lando swaps that out for probably their own entry point command and then wraps what you parse to it. So, we have to copy this command from the Docker file. For those who are curious, you can find this information actually in the Drupal CI environments project on drupal.org.

So, I had to go into the Docker file. And at the bottom, you'll see the command is here. I removed the log ins so that way it would all be exposed to Lando, because you can run Lando logs to see the log output. And then for Lando to create custom commands, you actually add to the tooling definition. So here I added one for PHP unit to run PHP unit. But the one we're going to execute is Nightwatch. So, the service is our app server, give it a description, the command, you'll notice here I have the command shortened to just yarn, test colon Nightwatch, because you can specify the working directory. So, we're telling it to run an app web core. So, I'll get back to the terminal. And for anyone who's curious, I am using the Ctrl key and the tilde key to toggle terminal. I have no idea how you get to it. I don't know what you click. That's just that's what I know. I don't primarily use VS code, but I use PHP storm but I know VS codes used by a lot of people. So maybe it would be more familiar for folks.

So, if I do Lando start, the party is going to get started. And it started our proxy is going to start our various services. Reading the chat. So, chrome driver via homebrew on Linux migrated from core to a cask and cask are only supported on Mac OS. Fun. And like so I'm pretty sure with homebrew a cask is any recipe or any software that's a user interface. Like I think that's what they differentiate casks to be. It really is one that, it's one that installs an app and installs a Mac app. So that what a cask is.

SPEAKER:
OK. So that's what a cask is. Oh, so it's just they just straight up remove support from Linux then because... It never had it on Linux. Yeah. OK, go it. Sorry. I mean, Chrome driver, like Chrome driver was just full on removed from the Linux homebrew install, because it got moved to a cask and cask are Mac OS only. OK. Got it. So yeah, so you're better off just downloading it or, you know, if you want it to, you can also just, you could just run chrome driver as a container on your machine if you have Docker. But I'm guessing if you have Docker, you're probably using one of these local environments. So now we have our Lando site running. And if I type Lando and scroll up a little bit, you'll see we have the Lando Nightwatch command. So, I'm going to copy that, and we'll run it with Taig core. And just like DDev, this should be pretty uneventful and just run without anything exploding because we have everything configured properly. So, it's actually, I was gonna say it's pretty easy. It can be straightforward to configure the setups.

Probably the worst part is the chrome driver conflicts. Which now that this is running, you guys we can circle back to Mike How's it going?

MIKE:
Pretty good. Thanks. Thanks to Brian Perry's help. So, I ended up modifying the package JSON to, to say like version 89 re-did a yarn install. And at that point it worked. I also had to leave that comment, that line 47 of .ENV, where you specify the various kind of switches and stuff like that. I had to leave that on commented. And at that point, it's, it's running.

SPEAKER:
So that way I can document this. So, you change this to 89?

MIKE:
Hold on one second, let me look at your screen. Yep. Yeah, so I change that to 89. And then to the yarn install.

SPEAKER:
OK, so let me And that's probably I mean, that'll work for us. Now, it's probably not a great long-term solution, though. Because it's Yeah, editing core.

MIKE:
I'm getting a phone call, I'm gonna, I'm gonna take this. This is as important.

SPEAKER:
OK, I'll make a note of that. So that way, anybody who wants to run it locally, can try to solve that. Or install chrome driver. And actually, wouldn't even be, I wonder if it'd be better just to say at latest to override it. I'll try that after we do this training. So, does anybody have questions? I know this was kind of like, abstract because we didn't like dive into running the test yet. Or we have the tests running. But there's just setting this up can be the hardest part. And I just wanted to make it be reproducible. And something people can mostly copy paste. Fortunately, the local one isn't something you can really copy and paste because you have to configure it. But does anybody have questions? So you wrote, like three blog posts on doing this with the DDev like a year or two ago? They will be (INAUDBLE) thing on the thing, and you've got them in the readme? Yes. Do those need updating? Are you going to update us? Yeah, I'm going to update them. Because if I go to the first one.

Let's see. Since we're doing Nightwatch, let me even go to the Nightwatch one. So, in this Nightwatch blog post, I don't configure any of the Nightwatch ENV files. Yeah. But part of that's due to the fact I wanted people to understand what they mean. So, I think I want to update this to have the shortcut. To have it all inside the DDev, or maybe I'll just update it to move to the to this format, and not fully explain everything. So that way, people do have some eat more easily to copy paste. But my plan is to go through and update all of these. Excellent. That'd be at the same URL? Yep, same URL. So, for anybody who's interested, they are in the blog, they are in the readme for that repo. I wrote a series on running PHP unit for Kernel unit for unit, the unit Kernel and functional tests. And then also for running functional JavaScript. Which functional JavaScript is our PHP unit tests that execute chrome driver and JavaScript tests? The good news, if you are using this the setup that I've outlined, I'm sure you've noticed, because it's not hard to miss it.

It has the PHP unit configuration here. So, you're able to execute cores, PHP unit tests, and Nightwatch tests with these configurations. If I close that, and I did. PHP, I can't type I got a new keyboard, and it is just taking some time to get used to. It’s like here, if I targeted the functional JavaScript test inside of the action module. It will run because we have the environment variables here and ready to go.

MATT:
And another reason I do want to make this easy to run is every test every fix for core requires a test and I know a Drupal Commerce. I would not accept a single patch unless it had a test and like good test, not like oh, well I did a basic assertion like no like it needs to prove this thing works left, right up and down and into the future. So, writing tests isn't necessarily hard. The hard part is running them and verifying them. And I want to help document that and make it be something that everybody can enjoy. Because I love writing tests. The hard part is maintaining them.

SPEAKER:
Oh, yeah, maintaining them too. Well, yeah, I mean, but that's the good part. If they don't break, that means things are working, you need to be scared when you make big major changes and nothing breaks, that's when you got to be scared. So, yes, thanks, I want to make sure to show different setups. I know I'm impartial to my way of just running locally, because then I don't need to have Docker running. Especially, you know, back when we used to be able to travel and go on planes. I want to use my flights to just write tests for things so and Docker eats up CPU and battery. So being able to just run PHP is built in web server and you SQL lite is a very efficient way to just write tests and get things rolling, and can be a little bit faster sometimes. Any other questions? Or any testing related stuff like OK, so anything around there, Benji? So, I have a question about Lando. Um, if you chose to have a separate node container running, would it run into trouble because the Nightwatch is running node, which then has to run PHP, which is on the other container?

Yes. So, let me actually show you the close pull request. Oh, that's one cool thing, too. I want to show about this. So, add, add, add, test Nightwatch and workflows. So previously, let me find, pass no sandbox. Believe it's in this commit. So, before we pass this override, and I can run a Lando rebuild to add this, but it might take a while. Essentially, it gets to this script. And the test runner. So, Drupal Nightwatch commands. So Nightwatch lets you create different commands. And inside the Drupal install command, it uses nodes, exec, or execute command and runs PHP.

MATT:
So, it executes a PHP script. So even though it's an end-to-end JavaScript test framework that's running in node, it's still makes a call to PHP to install the site because otherwise, we would have to go through the visual installer like functional JavaScript tests do. I wish that our functional Java or functional tests ran this command. So, to run Nightwatch, you do need to have PHP on the server so that way it can install Drupal for you. And yeah, so if you ran, so before Nightwatch, pointed to the node service. And if you did that, it would it would bootstrap chrome driver, get Nightwatch Friday, and then exit out with an error about PHP not being available. So, to clarify, like you, you, the new container that you're using has both node and PHP in it.

SPEAKER:
Correct. And there isn't a default, Lando provided container that does that I that is that build as root step, which is documented somewhere in here. So, if we do build as root. So, build steps. So, this outlines all the various ways you can do it. And I'm actually, you know, what I think I found is I typed a node, and they have a guide for installing node in your Lando PHP service. So, I copied it from here. And then I had to do the extra step of installing yarn, since that's an additional dependency. which honestly, like if I had, I'm on a project right now, it's a Laravel app. And we have a separate node service to run our compiler things. I might just do this to the app server instance just to remove like the extra service. Maybe not, I don't know. But yeah... There's different philosophies on that. But I have had to do a similar thing to get yarn working with BLT So, you know, because this one of like, let's face it, like a perfect world, you would have a service for everything like PHP would be its own service.

But it's local development, right? You're not. This isn't for deploying the app. So local development, you know, it's nice to just have a larger app container that has your tooling in it, because it can remove some complexity. It's just a matter of preference. Oh, I know I wanted to show one thing too. So if you are curious there's tests, so this repo actually runs Lando and DDEV and local and executes the test. So inside the GitHub workflows, the local is a little bit more convoluted because I do have to set up PHP and cash it. But this is the non-documented documentation where you run composer, install, you run, the web server, you run Chrome driver. I don't have to install it because the get hub image already has it. We run PHP unit and we run Night-watch. Inside Lando, we run the Lando installer for Dibbern. Dibben, Dibbern I never say it right. I don't know which one is right. Run Lando start run, Lando PHP unit, run Lando Night-watch. And then I was having issues with Chrome drivers.

So I haven't run Lando logs on Chrome driver, if there's a failure. And for DDEV, somebody already wrote a GitHub action for setting up DDEV which I want to contribute to.

MATT:
Cause it seems to take about a minute longer than Lando and I wonder if it could be sped up, but again, this test, the custom commands and the exports, the logs from Chrome driver. So as this has worked on and we improve any of the local environment setups, it does have automated testing for the automated testing integrations. And I hope that this can also serve some examples for integrating with CI services. So that way you can have your test be happy and running as well. The one thing I wanted to cover, but I didn't is actually running Drupal CI locally for all of this, but I figured that's a more convoluted setup and this would be more streamlined for most people. Any other questions or anybody having anybody that tried to set up and having some setup woes? So if no one else has anything, I have something again.

SPEAKER:
Yeah. So I have Night-watch running I have one, when I do the tag core tests, I have one command that fails and it's a new mommy thing. The command that fails is like the PHP command that runs like the test site install. So I try to troubleshoot that by running that command from the command line first and then I identified that I was running into memory issue I fixed that. And now that command, like when I run that command it doesn't produce any output. So I don't know why it's still failing. How would I go about troubleshooting something like that? So what we can do, so let me alright, let me power off Lando. And so normally I don't do it. I don't run that in VS code what I'll do is set up various terminals that I-term, because this is a lot easier to kind of see things that are going on. Oh, no, I like your I-term theme. I don't know what it is. I set it up once. (LAUGHTER) I think they came up with a new update and it has like a clean approach that, changes this tab stuff. Alright, so we've got Chrome driver running.

We got PHP built in server running. So you went to, so what command did you run again? You did yarn tests, Night-watch. Yeah so I didn't start Chrome driver in like a separate window or anything. I just kind of. You used the Built-In that's right you used the one that is a dependency. So let me close that out. Let me, I forgot I deleted the configuration. So let me just get back to that state real quick, packaged that G-sign Chrome driver. I want to try something real quick to yarn install Chrome driver. What is it, what do they use? Is it at next or latest? I have no clue. Let's try out latest. Oh, you're an ad, right you're supposed to be the front vendor and you're supposed to live in with, I don't even know what JavaScript is. Oh, D hey, check at work. Yeah it worked. So I'm going to copy paste that. So that's an easy way to get things updated, and we're going to put that into the handy-dandy collection of notes. And let me just reconfigure this really quickly. So HTTP one to seven, you sequel lights, hosts name.

Yeah, local hosts. Auto-start is true I don't need to change anything else. So you ran yarn test Night-watch and you did take. Take core. But the umami theme is what broke. Yeah it runs a command that says like the PHP install command, and it has a setup file and install profile and all that. Was it the install profile test? Yeah, I believe that's it right there. Alright so let's do copy relative path, and I think I just need to do that and that's how you can run. Oh, shoot that's not a tag sorry so you are able to run individual tests by giving it a path name. That is documented here in the read me the one at the bottom. Oh, let me give you a preview. So it's actually readable. Yeah, so I forgot to turn into headless. Somewhere in here, it says that you can run a test that way oh, it's run a single test. There you go. To run a single test, you just pass that for debug, you are able to that's for PHP unit. I know in somewhere, sorry, one second life find out, oh, I don't have it in for Bosma you're able to pass dash debug to get verbose output.

MATT:
But I think the only thing it will show are the Jason data it posts to the WebDriver or Chrome driver well, it's a Chrome drivers to the WebDriver API end points inside of Chrome driver. Not necessarily the local execution script. So let's see if this runs, so it is going to take a while because it's running the demo umami. So I guess we'll dive, I'm going to go through this again in the afternoon, but we'll kind of dive into it here with the test since we have it open. So this Drupal install file that you see right here on sidebar, that Drupal install maps to this command called Drupal install a little bit of magic. So exports command function, Drupal install it takes a setup file and install, profile, and land code. So this test is saying install with the test site, install script, and we want the demo umami theme, and then it executes the command as web server, which down here you'll see pseudo, oh, I didn't realize it did that. Wait if, oh, never mind. That's if the environment has that pass, which it doesn't Drupal CI, otherwise it just runs the command.

So it doesn't try to do pseudo on your local machine and that executes this script called test site, which is the test site application, which runs the install command. And this is the same install command as the Quick start command as well. I think maybe they're different actually are different, but this is like running Drudge as I said before. OK, we quit so this wait, Mike, so this failed for you? Yeah, that did fail. And I also tried running, I ran the test just like you, did I pass it in the actual test?

SPEAKER:
Want to paste the error? Yeah, sure, I'll paste the whole thing. Where do you want to past it? You can do it in the chat so that way everybody can see. Yeah sure. There is one thing I'd like to do is in the read me, I even opened like a notes area about the no sandbox. So that way people don't have that problem with running it headless. There's a way to fix that and I've opened a. I have actually opened an issue and use the new GitHub or the get lab merge request to open a merge request to fix that. So we hopefully don't need a pass, no sandbox anymore. I don't think it's letting me paste too much. I'm going to do a number of things here. So connected fail. Sorry let me put so many characters at a time. Alright so testing element is present in five seconds. So it sounds like your site is just not reachable. As I read that, oh, wait, it is command OK never mind. So it timed out reaching the site, but that's because command failed PHP scripts, test sites set up, install, file, install, profile, the deep URL as Jason.

What you could do want to copy that PHP script and run it locally and see what happens. Yeah, I already did. And I ran into one issue that I resolved. It was a max memory PHP memory issue. But now when I run it after resolving that I get any output and I'm running it again right now. OK I'm going to make a note.

MIKE:
Just a little plug here. The reason to use a Docker base local development environment is so your whole team can do it without you to do any support. Yep that's what (LAUGHTER).

SPEAKER:
So if you don't want to have problems like Mike in this DDEV or Lando. Unless you have to do it on an airplane. Unless you got to do it on an airplane.

MIKE:
But actually you can. I mean, I think, I don't know about Lando, but DDEV works fine on an airplane I mean.

SPEAKER:
I would always run it locally, so I didn't have to have Docker running, but if you've got an outlet, then do it.

MIKE:
I mean, I'm a big fan of local installations. I did everything that way for years. The problem is when you have to teach somebody else how to do it, or you have to change the config. I mean, you know, like what you're trying to do. I mean, if Mike had a little more time to work on this, he'd get, his just perfect until he needed to change it. Till Chrome updated. Yeah, exactly. Well, I'll tell you what, this isn't that important because I know where that I can run the other tests directly, you know? So you know, we can write some Allavara tests and run those directly.

SPEAKER:
So sounds like one, I want to just at least make the note here because now I lost the, is going to be a horrible note, but probably no. It is a horrible note man. Probably memory demo takes a lot to install. I mean, that's probably it's installing the umami demo, which installs all that default content. So that's probably your issue. And when we work on the allavara tests after lunch, we shouldn't have any of those issues. So we're getting close to time and I just wanted to do.

MIKE:
I got a couple of questions.

SPEAKER:
Oh yeah go ahead.

MIKE:
So I'm trying to get it set up with Lando. So I guess you started with a composer create projects to get Drupal and the web directory and all that stuff.

SPEAKER:
Yes which if you're going, are you setting up so you can contribute to Drupal core?

MIKE:
So if I do that, I have to use the 9.2 Point next branch.

SPEAKER:
If you did that, you actually want to download, you want to, so I realized that after I got this all set up, that this isn't a great example if you want to contribute to core, because when you use composer create project. It turns things around. Yeah it uses the composer install.

MIKE:
Right.

SPEAKER:
So you'll want to create it off of the actual development trunk or the development repository.

MIKE:
OK I can do that.

SPEAKER:
Yeah but otherwise go ahead sorry.

MIKE:
So the other questions are for Lando site, I found it in your repo, you have the surfaces defined site was able to copy and paste that. Can you give us the tooling somewhere?

SPEAKER:
Oh yeah the tooling should be at the bottom of it.

MIKE:
And Matt, I don't know if you're asking us from the perspective of trying to add this to that Lando, triple contributions, and repository. But I'm actively trying to do that right now. If I do have something I'll post the PR in the chat.

SPEAKER:
Right so Matt maybe I just haven't figured out where, what you're looking at and whether it's public. I see the... (CROSSTALK)

MIKE:
Where?

SPEAKER:
In the GitHub work in my workshop example.

MIKE:
Yeah.

SPEAKER:
So if you go to dot Lando dot YML, we have services then at the bottom is where it has the tooling definition.

MIKE:
OK I can see now thanks.

SPEAKER:
So what you could do is you don't even, like, you don't need to run Lando in net. You could just copy this file and paste it into there. Which is one thing that I'm adding now. So this repository is based on a composer build and not meant for core contributions can't type it is fine for contrib to set up your own core contrib for contribution environments, follow the following. I'll make that better wording. So you could do get clone there. And then if Lando, if DDEV, so I'll add these quick notes into here so that all folks can get a bit of this. And I'm going to commit these changes. I was about to yep thank you. I forgot to fix that. You know what VS code doesn't have like spell check built into it. There's some plugin for that one.

MIKE:
Yeah there is a good plug in for that.

SPEAKER:
Ah, yeah, there's a good plugin in Microsoft, (LAUGHTER) there we go. So how long have you been using a light theme there, Matt? For about four months because I realized dark themes were hurting my eyes and I use the dark theme only for PHP code rust, light theme, go light theme, JavaScript, light theme, Java, light theme, PHP, Dracula. And then I was like, why? So I finally went to light themes, which they, I feel like they also work better when I do my live streams and screen-sharing. It was just PHP was the holdout probably because I use a dark theme for like my IDE with PHP for the past 12 years, but nothing else. And then I finally changed it. Any other questions? I pushed up that change, which would also, if you do go to the GitHub pages version that lets GitHub pages, at auto updates as well.

MATT:
So I'm going to try to work on this being like a documentation page, which then folks can help me figure out where this belongs in the Lando DDEV and Drupal documentation. I'd be more than willing to get it into its proper home, but don't want to go to my main organization. So, yep. So I hope this was helpful and I hope this gave everyone a way to jumpstart getting their local testing environment set up with their favorite way.