Automation testing with Playwright 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. Automation testing 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 with code examples. Playwright JavaScript 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 (it’s free and great for creating your first tests) VScode npm install playwright Writing our first test 🍾 Test case Launch google.com Search Playwright Check Playwright in the title after the search 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 () => {
    
  });
}); happens always once before all tests. It’s quite handy to use to set up the test requirements before actual tests. beforeAll For example, generate data for tests through API or initialize variables which you’ll use in the tests. has the same idea as beforeAll. afterAll 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 we launched Chrome and navigated to google.com. beforeAll 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 ⬆️ We find input on a page and write Playwright there. is a method which you will usually use to enter the value into input you want to test. fill await page.fill('id=input', 'Automation testing'); We simulate pressing Enter while we are inside this input. await page.press('id=input', 'Enter'); We wait until the page loads. So we won’t continue testing before page is fully loaded. await page.waitForNavigation(); Finally, we use the function to retrieve the title of the search results page. title const title = await page.title(); 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 we close browser after all test afterAll 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 via the prompt "a developer writing code". AI Image Generator

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

From Manual to Automated: Write Your First Test with Playwright

Too Long; Didn't Read

@yanalunts

Credibility

RELATED STORIES