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
If you are using Windows then you will run into certain challenges. At BigBinary we use Mac all the time so we are not in the best position to help you out. If you are using windowsn then any issues you run into the installation steps you are on your own to figure things out.
Cloning the repository and setting it up
First let's create directories where we will clone the repository.
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.
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.
Now let's clone the repository.
To confirm that we have cloned the repository successfully and that we in the right place, use the following commands:
If the first line of the output in the console is # frozen_string_literal: true then that means the repository was successfully cloned.
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:
Because of the permission change all the files will be marked as changed in git. Let's see that in action first.
You should see a list of files in red. Let's commit all these changes by executing the following commands.
Now let's install the Ruby version that is needed to run the cloned code.
Ensure that PostgreSQL and Redis are running.
Now let's setup the Rails application by executing 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 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.
