Have you ever considered testing your front-end application? Most of the time, we create tests in the back-end to ensure that our API is working the way it is intended to. However, the lambda user will likely never see the back-end and might end up having a bad user experience if the front-end is not working as expected. This is why it is important to test the front-end as well.

Yet, testing the front-end from an end-to-end point of view can be a bit tricky. Testing all the classic use cases and writing code, checking if every element is present requires quite some time as we have to write those step by step. In this post, we will see how Playwright and Codegen can be used to make front-end testing seamlessly easy.

Playwright

Playwright is a Node library to automate the Chromium, WebKit, and Firefox browsers with a single API. It enables cross-browser web automation that is ever-green, capable, reliable, and fast. It is a great tool to use for end-to-end testing as it allows you to test your application in different browsers and devices.

It is now maintained by Microsoft and is a great alternative to Puppeteer or Cypress.

How to use Playwright

To use Playwright, you will need to create a Playwright application. Create a new project and install Playwright by running the following commands:

mkdir my-playwright-app
cd my-playwright-app
npm init playwright@latest

The cli will ask you a few questions to know wether you want to use TS or JS, where to put your tests cases files, if it should create a github action workflow, or even if it should install both the browsers and the drivers.

Beware: On arch based systems, you might encounter some issues with the installation of the browsers. You might have to install them manually. Usually installing the dependencies cited in this github thread will solve the issue.

Here is what a basic test case looks like:

import { test, expect } from '@playwright/test';

test('test', async ({ page }) => {
  await page.goto('https://mpellouin.com/');
  await page.getByRole('link', { name: 'About' }).click();
  await expect(page.getByRole('heading', { name: 'Contact' })).toBeVisible();
  await page.getByRole('heading', { name: 'About' }).click();
  await expect(page.getByRole('heading', { name: 'About' })).toBeVisible();
  await page.getByText('I’m a Junior Software').click();
  await expect(page.locator('#content')).toContainText('I’m a Junior Software Engineer currently studying in Chung Ang University (중앙대학교), in Seoul, South Korea 🇰🇷 as part of my 4th year in Epitech Technology. I’m looking for a 6-month long internship starting in September 2024.');
  await page.getByRole('link', { name: 'Posts' }).click();
  await expect(page.getByRole('heading', { name: 'Recent' })).toBeVisible();
  await expect(page.getByRole('heading', { name: 'React' })).toBeVisible();
  await expect(page.getByRole('heading', { name: 'Computer architecture' })).toBeVisible();
});

Once the installation is done, you can start writing your tests in the tests folder. But that is where the problem starts. Writing tests can be quite long and tedious. Indeed as mentioned earlier, to write down your test you will have to select locators, specify an action, check if some elements are there… This is quite long and boring.

Let’s try something else!

Codegen

Playwright comes with a tool named codegen. It enables us to generate test cases by performing actions in a browser. It is a great tool to use to generate test cases as it will save you a lot of time.

Running a codegen session is quite simple. By running the following command, two windows will open; one with the browser and an other with a code editor. You can then perform actions in the browser and the code will be generated in the code editor.

npx playwright codegen

Note that you will then be able to verify the elements present in the browser with different assertions:

• ‘assert visibility’ which checks if the element is visible
• ‘assert text’ which checks if the text corresponds to the one you want
• ‘assert value’ which checks if the value of the element is the one you want

By using a combination of these assertions, you can easily test your application.

Once you are done with your test case, you can copy the code from the code editor and paste it in your test file. You can then run the test by running the following command:

npx playwright test

The codegen tool comes with a set of different specifications that you can use to generate your test cases. Here are some of the things you can add to your codegen command to make the tests more specific:

• a url that opens the browser on a specific page
• a viewport size (width and height, specified by the --viewport-size flag, ex: --viewport-size=1920,1080)
• a device (specified by the --device flag, ex: --device="iPhone 12")
• a color scheme (to check wether your application style is working well with dark mode, specified by the --color-scheme flag, ex: --color-scheme=dark)
• a locale (to check your multilanguage application, specified by the --locale flag, ex: --lang=fr-FR)
• a timezone (To verify if times and dates are displayed in locale time, specified by the --timezone flag, ex: --timezone=Europe/Paris)
• a geolocation (if your application needs some kind of geolocation data, specified by the --geolocation flag, ex: --geolocation=48.8566,2.3522)

By using these specifications, you can generate test cases that are more specific and that will cover more use cases. Playwright also has special flags for authentification state (--save-storage and --load-storage), but we will not cover them in this post.

Why is testing the basic use cases important?

Imagine that one of your application has an onboarding flow for Skype. The user connects through oauth and is then redirected to an onboarding section that is specific to Skype. Your team probably stopped working on this feature a while ago and you are now working on something else. However, a developer creates an oauth for linkedin and introduces a bug in the whole onboarding flow that creates an unwanted redirection. He fixes it except for the obviously less used Skype because he didn’t think about testing it. Months later, a client connects using Skype, gets redirected to the wrong place, might be stuck in the new page and will not sign their contract with your team.

Testing the basic use cases is important as it allows you to ensure that your application is working as expected. Testing those use cases allow you to prevent bugs that would degrade the user experience badly. This would probably lead to hotfixes that could have been avoided if the application was tested properly.

Moreover, it checks if the app works on different devices and browsers.

Conclusion

In this post, we have seen how Playwright and Codegen can be used to make front-end testing seamlessly easy. By using Playwright, you can test your application in different browsers and devices. By using Codegen, you can generate test cases by performing actions in a browser. This will save you a lot of time and will allow you to test your application more thoroughly.

Keep in mind that those tests are end-to-end tests and that if your application is comprised of some logic in the front-end, you should probably write some unit tests as well. However, end-to-end tests are a great way to ensure that your application is working as expected and that the user will have a great experience.

Thank you for reading this post. I hope you enjoyed it and that it will help you to test your front-end application more thoroughly.

Next week we will see why performing a thorough antivirus scan of the files in your s3 bucket is important. Stay tuned!