Blog # 2 : Running First Playwright Test

 In this blog post, we’ll walk through the basics of writing and running a Playwright test using JavaScript. You’ll learn how to name test files, structure tests, and execute them step by step.

Step 1: Creating a New Test File

First, navigate to your project’s tests folder (or create one if it doesn’t exist). Playwright follows a specific naming convention for test files. A typical test file should end with .spec.js or .test.ts. This helps Playwright automatically detect test files.

Example test file name:

google-search.spec.js

Step 2: Importing the Playwright Test Module

To write tests in Playwright, you need to import the @playwright/test module at the beginning of your test file.

For ES modules:

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

For CommonJS:

const { test, expect } = require('@playwright/test');

How to Determine If Your Project Uses ES Modules or CommonJS

Check your package.json file:

• If there is "type": "module", then your project is using ES modules.
• If there is no type field or it is set to "commonjs", then your project is using CommonJS.

Both module types work fine, so choose the one that aligns with your project setup.

Step 3: Writing a Simple Test

Let’s create a simple test that opens google.com, fetches the page title, and verifies that it matches “Google.”

Example Test in JavaScript

Explanation:

1. test('Check Google Homepage Title', async ({ page }) => { ... }):
2. await page.goto('https://www.google.com');:
3. const pageTitle = await page.title();:
4. expect(pageTitle).toBe('Google');:

---

Step 4: Running the Test

To execute your test, run the following command in your terminal:

npx playwright test

To run a specific test file:

npx playwright test tests/google-search.spec.js

---

Playwright provides several options to control how tests are executed:

• Headless Mode (default): Runs tests without opening the browser UI. In JavaScript, this is the default setting when using Playwright. However, you can explicitly specify it as follows:   
  
  npx playwright test --headed=false

• Headed Mode: Runs tests with the browser UI (use -headed).
  
  npx playwright test --headed

• UI Mode: Opens a graphical interface for managing test runs.
  
  npx playwright test --ui

• Debug Mode: Stops at failures for debugging.
  
  npx playwright test --debug

• Running in Different Browsers: Playwright supports multiple browsers. Specify a browser using -project:
  
  npx playwright test --project=chromium

• Running Tests in Parallel: Control the number of parallel test workers with -workers:
  
  npx playwright test --workers=3

---

Step 5: Expected Output

When you run the tests, the output will provide feedback on the test results. If everything works correctly, you should see output similar to this:

This means:

• 9 tests were executed.
• 3 workers were used for parallel test execution.
• All tests passed (with a total duration of 13.1 seconds).

If a test fails, the output will display detailed error messages, including the failed test’s location and the reason for failure. Playwright will also show a snapshot of the page and the specific action that led to the failure, making debugging easier.

Conclusion

In this post, we covered the basics of writing and running a Playwright test using JavaScript:

✅ Naming test files properly

✅ Importing Playwright’s test and expect functions

✅ Writing an async test using await

✅ Understanding JavaScript’s asynchronous behavior and Promises

✅ Running tests with different options using the Playwright CLI

✅ Determining whether your project uses ES modules or CommonJS

Next, we’ll dive deeper into interacting with page elements, handling multiple browser contexts, and more advanced testing techniques. Stay tuned!