Automating with Playwright

(If you prefer to read the article in Spanish, click HERE)

Why Playwright? How to start a project with this framework? What advantages does it have? How does it work at the code level? I will tell you very briefly in this article 🙂

Before we start… What Playwright is? 

It is an open-source automation framework for End-to-End testing developed by Microsoft, it not only allows you to test the automation of web applications, but also of APIs. 

End to End tests are end-to-end tests that simulate end-user behavior. 

Why Playwright? 

This framework allows us to test within different browsers (Edge, Chrome, Firefox, webkit…), through different platforms (web, mobile) as well as API tests (in te same way it can be done by Postman). Another potential skill of this framework is that it is multilanguage, which allows us to code our tests in C#, JavaScript, TypeScript, Python, Java. Also, it allows us to run it on Windows, Ubuntu, Mac, etc. Test executions can be launched in parallel, which allows to optimize the execution speed of these, unlike tests that are launched sequentially. 

A few more things in favor of this tool. There is no need to install codes, frameworks, etc. in our machines, simply in the #code we install the playwright (npm init Playwright) and follow the steps, being very intuitive. 

Tests can be generated by writing code but also the Playwright code generator can be used to record the tests, thus facilitating the coding, as well as launching them in debug mode for debugging. Finally, there are no browser version issues like other frameworks. 

Now that we know a little more about this powerful automation framework, we are going to see a little more in detail how it works at the code level and what else it offers us when doing our tests. 

Project Playwright 

 The project can be divided into 3 parts: 

• Pages 
• Specs 
• Steps 

Pages: On this section we are going to configure our test pages. For example, if our site has a login through a certain URL but our tests point to another URL, we could create a Login page and another one for our tests with its corresponding URL. 

Also, here the config.ts (data configuration document) can be created where it will contain users / passwords / settings related to the rest of the tests, etc. 

Spect: This part is where we configure our test flow according to test data. This is where we tell what we want to test. For example:
            Test1 – women’s clothing screen + shopping cart 

            Test2 – men’s clothing screen + shopping cart  

We could create as many combinations as we need to test. 

Steps: Here the steps for our tests are set up. For example, if we test a clothing page, we can configure a step1 – women’s clothing, another step2 – men’s clothing, another – shopping cart, and all the steps on each screen, click on pants, search for a shirt, etc. 

 Then we have the playwright configurator, where we can configure the behavior of our tests: 

• web / mobile browsers 
• Workers 
• Traces 
• Screenshoots 
• Etc… 

Once we have done the tests, reports could be obtained either through the configuration of Jtest or Allure. 

For instance, with Allure we have a very powerful reporting methodology, where a dashboard will show us the tests per browser with their corresponding console errors, such as their screenshots, as well as graphs and percentages with information on all the tests executed; informing us in a very graphic way about the results obtained: how many tests resulted OK, how many KO and how many have finished, but with failure. 

More advantages that we can find in carrying out our tests are the video recordings. 

 Conclusion: Compared to other automation frameworks, the way of coding is very simple. It has a project structure being able to reuse code by calling the test steps. 

The main advantages when using Playwright include saving problems with browser versions and its reporting system, which, either to see the results of the tests, or to report to someone in business, is very practical and intuitive. 

Another of its strengths is that it is very easy to maintain due to the structure it has to design the tests, as we have seen in the screenshot provided over this document. 

By the way! Before I finish, I want to thank Alberto Díaz for inspiring me to write this article, and of course, also the entire ENCAMINA QA team, because all of them have  collaborated to move the project forward 😍