In 2020, in the automation testing field, <a href="https://www.microsoft.com/sr-latn-rs/" target="_blank">Microsoft</a> appeared with a new framework called <a href="https://playwright.dev/" target="_blank">Playwright</a>. Characteristics like cross-browser support, working on Windows, Linux, and macOS, locally or on CI, in headless or headed mode, are just some cool stuff for this new automation tool - Playwright. Compared with some other tools, <a href="https://playwright.dev/" target="_blank">Playwright</a> code can be written in different programming languages, like C#, Java, JavaScript, and Python, which is very cool when we know that for example Cypress support only JavaScript. Also, there is support for all major browsers – Chrome, Firefox, Safari, and MS Edge, and they have insightful names in the framework – Chromium for Chrome, and WebKit for Safari (Firefox is also Firefox :)). Maybe one of the biggest advantages of Playwright is that it is a full framework, so it can interact directly with the browser, which is pretty nice when we have in mind that Selenium uses Web drivers. <h2 style="text-align: justify;">Can Playwright run slowly?</h2>That’s not possible. Playwright runs its tests very fast. But, nobody is perfect – so and Playwright. Because it is a newcomer in the <a href="https://cyberlab.rs/software-testing" target="_blank">QA automation</a> world, it doesn’t have too big a community of users like Selenium or Cypress. Unfortunately, Playwright doesn’t support work with native mobile apps. Finally, Playwright does not support testing in Internet Explorer 11, which is not actually a disadvantage, because IE is not more in active usage. <h2 style="text-align: justify;">How to install Playwright?</h2>When it’s about installation, it is very simple – you just need Node.js and VS Code as editors. *** NOTE: We use Node.js because we will use Playwright with JavaScript! *** Because of that, in VS Code terminal check that you have installed node and npm and their versions: <pre style="text-align: justify;">node --version npm --version </pre> Here are commands to install the latest version of Playwright, typed in VS Code terminal: <pre style="text-align: justify;">npm init playwright@latest </pre> The prompt will ask you some questions, and answer all of them with yes. Also, you will question which language you want to use in a particular project – depending on your needs, you choose TypeScript or JavaScript. <img src="https://cyberlabimages.s3.eu-central-1.amazonaws.com/Screenshot+from+2023-03-11+13-10-58.png" style="width: 502px; height: 110px; display: block; margin-left: auto; margin-right: auto;" alt="Playwright new automation tool"> <img src="https://cyberlabimages.s3.eu-central-1.amazonaws.com/Screenshot+from+2023-03-11+13-11-41.png" style="width: 903px; height: 121px; display: block; margin-left: auto; margin-right: auto;" alt="Playwright new automation tool"> When the installation is completed, you will see the structure of folders like the following: <img src="https://cyberlabimages.s3.eu-central-1.amazonaws.com/structure_folders.png" style="width: 244px; height: 200px; display: block; margin-left: auto; margin-right: auto;" alt="Playwright new automation tool"> Here, the node_modules package is a place where are stored data about Node.js modules from installation. Then, the tests package is the place where we store all our tests, and they are in the form of a spec.js file: for example, below we run the example.spec.js file. Then, we have a tests-examples package - that's just a package containing examples when you get in touch with Playwright for the first time to exercise running tests. Rest of the files:&nbsp; .gitignore, package-lock.json, and package.json are common in every project where we have Node.js. But, playwright.config.js is specific for Playwright and tells us that this is a configuration file, where we can describe, for example, how much time our tests will re-execute if they fail the first time, or if we want a trace of execution after it's done. Suppose we want to run the test that we have in the tests/example.spec.js file, we can do the following: <pre style="text-align: justify;">npx playwright test tests/example.spec.js --headed --project=chromium </pre> or simpler: <pre style="text-align: justify;">npx playwright test example.spec.js --headed --project=chromium</pre> Options like --headed and --project=chromium are not necessary, but with --headed we run our test in headed mode (with open browser), and with --project=chromium we specify in which browser our test will run (this also can be done in playwright.config.js) To see the list of available options for running the test, simply type: <pre style="text-align: justify;">npx playwright test --help </pre> <img src="https://cyberlabimages.s3.eu-central-1.amazonaws.com/npx_help_options.png" alt="Playwright new automation tool" style="width: 1094px; height: 313px; display: block; margin-left: auto; margin-right: auto;"> Now, when our tests are run, we can see an HTML report for them. Type following: <pre style="text-align: justify;">npx playwright show-report </pre> A report will be opened in localhost:9323. <img src="https://cyberlabimages.s3.eu-central-1.amazonaws.com/html_report_all_tests.png" alt="Playwright new automation tool" style="width: 1091px; height: 283px; display: block; margin-left: auto; margin-right: auto;">In the report, you can expand each step and see the flow of execution. <img src="https://cyberlabimages.s3.eu-central-1.amazonaws.com/html_report_one_test.png" style="width: 900px; height: 460px; display: block; margin-left: auto; margin-right: auto;" alt="Playwright new automation tool">That’s all nice, but what to do if we want a prettier appearance of the report? For that, we have an allure reporter. Type :&nbsp; <pre style="text-align: justify;">npm i -D @playwright/test allure-playwright </pre> and <pre style="text-align: justify;">npx playwright test - -reporter=line,allure-playwright </pre> to install an allure reporter to our project and run tests with it. When that part is finished and tests are run, we can generate an allure report for those. Type:&nbsp; <pre style="text-align: justify;">allure generate ./allure-results - -clean </pre> and&nbsp;<pre style="text-align: justify;">allure open ./allure-report </pre> to generate the report.A new tab in the browser will open and will show the following: <img src="https://cyberlabimages.s3.eu-central-1.amazonaws.com/allure_report.png" style="width: 801px; height: 425px; display: block; margin-left: auto; margin-right: auto;" alt="Playwright new automation tool"> There are various tabs in Allure Reporter: Overview, Categories, Suites, and others. In the Overview tab (which we currently see) we see how many <a href="https://cyberlab.rs/software-testing" target="_blank">test</a>s passed, or failed, and also if there are some flaky tests. From this report, we see that 6 tests were executed, 3 passed and 3 failed, in each browser used in this execution (Firefox, chromium, WebKit) 1 test passed and 1 failed. If some test fails the first time when it's run and then passes, it will be threatened as a flaky test. For the end, let’s see some elemental structure of one test in Playwright: <img src="https://cyberlabimages.s3.eu-central-1.amazonaws.com/Screenshot+from+2023-03-10+15-10-07.png" style="width: 500px; height: 499px; display: block; margin-left: auto; margin-right: auto;" alt="Playwright new automation tool"> We see firstly test. describe () block – this is for the situation when we have more than one test (which will be in 99.9% of cases). Next are tested. before () and test.beforeEach() blocks – these structures are for running some code before all test cases and before each single test case. Also, there are afterAll() and afterEach() blocks - one is for executing after all tests, and one is for executing after each test, respectively. For the end, we have a test() block where we write our business logic. <h2 style="text-align: justify;">Conclusion</h2>A playwright is a powerful tool which for sure will be the most popular automation tool in the near future. The main advantage is that code in Playwright is really easy to read, even for those who are not in the IT world at all. Maybe, the most important thing – Playwright is free. See you on <a href="https://cyberlab.rs/blog" target="_blank">our blog</a> with the next topic!

In our new blog post, we introduce you to a new free automation tool - Playwriter with a simple guide for setting up tests on your machine using JavaScript.

Playwright new automation tool intro and installation