From Manual to Automated: Write Your First Test with Playwright

Automation testing with Playwright

Automation testing is gaining popularity every day, and many tools are available to help you to be a master in it. Sometimes the hardest part is to choose the correct one.

Playwright is a great tool gaining popularity due to its flexibility and ease of use especially with JavaScript. Playwright considered to be one of the fastest to run UI-tests with. In this article, we will discuss the process of writing your first test with Playwright using JavaScript with code examples.

Installing Playwright

Before we start writing our first test case, you need to install Playwright. You can do this by running the following command in your terminal inside IDE. I would also recommend installing VScode (it’s free and great for creating your first tests)

npm install playwright

Writing our first test 🍾

Test case

1. Launch google.com
2. Search Playwright
3. Check Playwright in the title after the search
4. Close browser

Let’s start writing the architecture of our test first.

const { chromium } = require('playwright');

describe('Google Search Test', () => {
  let browser;
  let page;

  beforeAll(async () => {
    
  });

  afterAll(async () => {
    
  });

  it('should return result search in google ', async () => {
    
  });
});

beforeAll happens always once before all tests. It’s quite handy to use to set up the test requirements before actual tests. For example, generate data for tests through API or initialize variables which you’ll use in the tests.

afterAll has the same idea as beforeAll.

It happens after all tests only once. You can use to close a browser or do some actions to clean data after running tests.

We need these variables to work with a browser and page later.

let browser;
let page;

This is a test body, where we will write our actual test.

it('should return result search in google ', async () => {
    
  });

Let’s add opening a browser inside beforeAll

beforeAll(async () => {
    browser = await chromium.launch(); // here you can use any other browser if you want
    page = await browser.newPage();
    await page.goto('https://www.google.com');
  });

Inside beforeAll we launched Chrome and navigated to google.com.

Let’s add a test body

it('should return search results', async () => {
  await page.fill('id=input', 'Automation testing'); // you an search any other text here
  await page.press('id=input', 'Enter');
  await page.waitForNavigation();
  const title = await page.title();
  expect(title).toContain('Automation testing');
});

Our result ⬆️

1. We find input on a page and write Playwright there. fill is a method which you will usually use to enter the value into input you want to test.

await page.fill('id=input', 'Automation testing');

2. We simulate pressing Enter while we are inside this input.

await page.press('id=input', 'Enter');

3. We wait until the page loads. So we won’t continue testing before page is fully loaded.

await page.waitForNavigation();

4. Finally, we use the title function to retrieve the title of the search results page.

const title = await page.title();

5. Using assertion we check if the title contains Playwright(or another string which we were searching to confirm that we redirected to the correct page)

expect(title).toContain('Automation testing');

Let’s add closing the browser inside afterAll

afterAll(async () => {
    await browser.close();
  });

Inside afterAll we close browser after all test

Running your test

This will run all your test

npx playwright test

If you want to run a specific test file

npx playwright test your-file.js

When you run your tests Playwright also generates HTML reports, which are very useful for debugging. It breaks your test into steps, and if you got a failed test you can always see where the failure happened and debugged it faster.

Run this to open your report

npx playwright show-report

The lead image for this article was generated by HackerNoon's AI Image Generator via the prompt "a developer writing code".