Playwright for Beginners. Install and run tests using the CLI

Introduction

This tutorial will guide you through the basics of using Playwright, a powerful tool for browser automation. You will learn how to install Playwright, run tests, and explore its features using the command line interface (CLI). Whether you are a beginner or looking for a refresher, this guide will help you get started effectively.

Step 1: Install Playwright

To start using Playwright, you need to install it on your system. Follow these steps:

1. Open your terminal or command prompt.

2. Navigate to your project directory where you want to set up Playwright.

3. Run the following command to install Playwright via npm:

   npm install playwright
   

4. Verify the installation by checking the current version with:

   npx playwright --version
   

Practical Tip

Ensure you have Node.js installed on your machine, as Playwright requires it to function.

Step 2: Run Your First Test

After installation, it’s time to run your first test. Here’s how to do it:

1. Create a new JavaScript file, for example test.js.

2. Write a simple test script. Here’s an example:

   const { chromium } = require('playwright');
   
   (async () => {
       const browser = await chromium.launch();
       const page = await browser.newPage();
       await page.goto('https://example.com');
       console.log(await page.title());
       await browser.close();
   })();
   

3. Save the file.

4. Execute the test by running:

   node test.js
   

Common Pitfall

Ensure that your script does not have syntax errors, as these will prevent it from running correctly.

Step 3: Run Tests in Headed Mode

Watching your tests run can help with debugging. To run your tests in headed mode:

1. Modify the launch function in your test script:

   const browser = await chromium.launch({ headless: false });
   

2. Save your changes and run the test again. You should see the browser window open as the test executes.

Step 4: Target Specific Browsers

Playwright allows you to specify which browser to use. You can run your tests in Chrome, Firefox, or WebKit. Here’s how:

1. Change the browser instance in your script:

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

2. Replace chromium with firefox or webkit depending on the browser you want to test.

3. Run your test again to see the changes.

Step 5: Running Specific Tests

If you have multiple tests in a file and want to run a specific one, you can do so by:

1. Using the test.only method:

   test.only('my specific test', async () => {
       // your test code here
   });
   

2. Execute your tests, and only the specified test will run.

Step 6: View Playwright HTML Report

To analyze your test results:

1. Add the following to your test file to generate a report:

   await page.screenshot({ path: 'screenshot.png' });
   

2. After running your tests, check the directory for the generated HTML report.

Step 7: Run Tests in UI Mode

For a more interactive experience, you can run tests in UI mode:

1. Use the command:

   npx playwright test --ui
   

2. This launches a user interface that allows you to interact with your tests visually.

Step 8: Update Playwright

Keeping Playwright up to date is crucial for using the latest features and improvements. To update Playwright:

1. Run the following command in your terminal:

   npm update playwright
   

2. Verify the update by checking the version again:

   npx playwright --version
   

Conclusion

You have now learned how to install Playwright, run tests, and explore its various features through the command line interface. With these steps, you can start automating your browser tasks effectively. For further learning, consider exploring more advanced features and integrations within Playwright. Happy testing!