Automating the QA work on a web application
Let's learn Playwright by automating the e2e tests on a simple web application. Throughout this course we will be learning about the concepts of Playwright by adding tests and configurations to the granite project.
Granite is a simple To-Do application. People who go through the Learn Ruby on Rails course on BigBinary Academy learn how to create this project using Ruby on Rails and React.
Setting up the development environment
Since we are going to work with a Ruby on Rails application, we need to setup Ruby on Rails and NodeJS on our machine. You can follow the instructions given below to set it up based on the type of machine you have.
Mac
Windows with WSL
Cloning the repository and setting it up
Now we have all the pieces of the puzzle ready. We just have to put them together. Let's start by cloning our repository. For this let's create a new working directory where we want our project files to be in.
IMPORTANT NOTE: When working on Windows machines, try to avoid cloning and working on files in the Windows directories from WSL i.e. do not work on files in the directory /mnt/*. This is because WSL acts as a subsystem in Windows with its own file system. All the windows directories are considered to be external storage in WSL and working with them tends to be extremely slow since a connection has to be established between the two systems to access the files. When developing on WSL, always work on directories which are outside /mnt.
Let's create a directory in home to clone our repository. For this, use the command:
Let's clone our repository here now.
IMPORTANT NOTE: If you have cloned the repository using some git client in Windows please delete it and start fresh as mentioned in the steps above. This is because Windows and Unix machines treat line ending differently and cloning a repository in Windows using git converts the line endings to the Windows format by default unless explicitly specified. This can cause a lot of undesired outputs and errors.
To clone the project use the command:
Now that we have cloned our project, lets go inside it by using the cd command:
To confirm that we have cloned the repository successfully and that we in the right place, use the following commands:
We should get an output similar to this:
IMPORTANT STEP: Let's change the access permissions of the files in the cloned repository. Skipping this step will result in a lot of permission issues when you start working with the project. So it is vital that you do this step. To grant all access permissions to the files in this directory, use the command:
This command will recursively go through all the files in the current directory and allow read, write and execute permissions for those files for all users. There won't be any output for this command if all goes well. Now we can open our repository in VSCode. To do this you can enter the command:
If this doesn't work, then open VSCode and open the directory using the Ctrl + O or ⌘ + O shortcut key. If you're working on a Windows machine, make sure you are connected to WSL in VSCode before you do this step. You should be able to see a screen similar to this:
Note that all the files will be marked as modified in git. This is because we changed the access permissions for all of them.
Now that this is done, let's setup our application. To do this, let's navigate to the repository from our WSL terminal and enter the following command:
This one command will download all the ruby gems, the npm packages, initialize the database and seed the data. If all goes well the command should exit with a message ending with these lines:
If some error was thrown during this step, some basic troubleshooting steps include:
- Making sure PostgreSQL has been started and is running. If it was started previously, then there is a chance that it might have stopped when you closed the WSL terminal. So open a new tab and execute
sudo service postgresql start.
- Making sure Redis has been started and is running. If it was started previously, then there is a chance that it might have stopped when you closed the WSL terminal. So open a new tab and execute
sudo service redis-server start.
- Making sure the right versions of Ruby, Rails and Node.Js have been installed.
If you have all the above working fine then follow the FAQ section below to see if the problem you're facing is listed below and try resolving it based on the solutions provided.
Now that we have setup the application, we can start working with it.
Starting the servers
To start the Rails server, open a new terminal window, navigate to the repository and type the following command:
IMPORTANT NOTE: The PostgreSQL and Redis servers should be up and running either in other terminal tabs or in the background. They should not be closed until you stop working with the application.
Executing the above command will give an output similar to this:
Now we need to start the webpack-dev-server. To do this, create a new terminal window, navigate to the repository and enter the following command:
If it works well, then we should get a similar output:
Great! Now that we have all the servers up and running, we can open the app. To do this, open a browser and go to the URL, http://localhost:3000. We should be able to see a similar page:
You can use the following credentials to login to the application and get familiar with it.
