---
title: "Test Case Writing Guideline & Best Practice - Playwright"
language: "en"
url: "https://docs.testany.io/en/docs/managing-test-case-playwright/"
markdown_url: "https://docs.testany.io/en/docs/managing-test-case-playwright.md"
translation: "https://docs.testany.io/zh/docs/managing-test-case-playwright.md"
last_updated: "2026-03-26T15:39:24+08:00"
---

# Test Case Writing Guideline & Best Practice - Playwright

## **Overview**

Playwright is an end-to-end testing framework for web applications. This document shows how to write a Playwright test case in Testany.

Testany's Playwright Executor simplifies the end-to-end Playwright testing lifecycle - from recorded scenarios to executing them across multiple browsers and reviewing results - all within a unified interface.

## **Using Playwright Executor**

### **Method 1: Direct Upload**

#### **Prepare Test Cases**

Similar to other testing, you need to prepare the following files:

1. **Test Code File**: For example, `e2e-demo.spec.ts`.
2. **Config File**: `playwright.config.ts`
3. **Project Dependency File**: `package.json`

**Example test file** (`tests/e2e-demo.spec.ts`):

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

test('homepage has correct title', async ({ page }) => {
  const baseUrl = process.env.BASE_URL || 'https://example.com';

  await page.goto(baseUrl);
  await expect(page).toHaveTitle(/Example/);
});

test('login with credentials', async ({ page }) => {
  const baseUrl = process.env.BASE_URL;
  const username = process.env.TEST_USERNAME;
  const password = process.env.TEST_PASSWORD;

  await page.goto(`${baseUrl}/login`);
  await page.fill('input[name="username"]', username);
  await page.fill('input[name="password"]', password);
  await page.click('button[type="submit"]');

  await expect(page).toHaveURL(`${baseUrl}/dashboard`);
});
```


> **Tip**
>
> **Environment Variables Configuration**
>
> The environment variables used in your code (e.g., `BASE_URL`, `TEST_USERNAME`) must be configured in **both** places:
> 1. **Test Case detail page** → **Environment Variables** section: Define the variable name and value
> 2. **Test script code**: Use `process.env.VARIABLE_NAME` to read the value
>
> See [Managing Test Case](https://docs.testany.io/en/docs/managing-test-case.md) for how to configure environment variables on the platform.


**Example config file** (`playwright.config.ts`):

```typescript
import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  timeout: 30000,
  use: {
    headless: true,
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
  },
  reporter: [['html', { outputFolder: 'playwright-report' }]],
});
```

#### **Package Test Cases**

Ensure this structure before zipping:

```text
playwright/                        ← ✅ Must include root directory
├── node_modules/                  ← 🚫 Exclude
├── playwright-report/             ← 🚫 Exclude
│   └── ...
├── test-results/                  ← 🚫 Exclude
│   └── ...
├── tests/                         ← ✅ Must include directory of your test files
│   └── e2e-demo.spec.js           ← ✅ Must include your test files
├── playwright.config.js           ← ✅ Must include Playwright config
└── package.json                   ← ✅ Must include project dependencies
```

To prepare for uploading to the Testany platform, ensure that you package all essential files into a zip file, such as `e2e-demo.zip`.

#### **Register on the Testany Platform**

Once you have successfully prepared the zip file, you can register your test cases on the Testany platform. Refer to the "[Managing Test Case](https://docs.testany.io/en/docs/managing-test-case.md#register-test-case)" guide in our document for detailed steps on how to register test cases.


> **Info**
>
> Ensure below meta are properly filled in test case detail:


- **Executor:** `Playwright`
- **Trigger Path:** Specify the path from the root directory of your test file (spaces are not permitted). For example: `playwright/tests/e2e-demo.spec.js`
- **Config Path:** Indicate the path from the root directory of `playwright.config.js`. For instance: `playwright/playwright.config.js`

### Method 2: **Import from Git**

#### **Push Codes to Git**

Ensure the same directory structure is in your repo.

```text
playwright/                        ← ✅ Must include root directory
├── node_modules/                  ← 🚫 Optional
├── playwright-report/             ← 🚫 Optional
│   └── ...
├── test-results/                  ← 🚫 Optional
│   └── ...
├── tests/                         ← ✅ Must include directory of your test files
│   └── e2e-demo.spec.js           ← ✅ Must include your test files
├── playwright.config.js           ← ✅ Must include Playwright config
└── package.json                   ← ✅ Must include project dependencies
```

#### **Import from Git**

Once you have pushed the code to Git, choose the Git import flow that matches your team:

- [Import from Git V1 vs V2](https://docs.testany.io/en/docs/import-from-git-v1-vs-v2.md)
- [Import from Git V2: Connect GitHub and Create an Import](https://docs.testany.io/en/docs/import-from-git-v2-create-import.md)
- [Import from Git V1 (Credential-based Sync Link)](https://docs.testany.io/en/docs/bulk-import-test-cases-from-git.md)

## **Viewing Playwright Reports in Testany**

### **Access the Report**

1. In the execution history, click **View log**

   ![image-20250422-100612.png](https://docs.testany.io/docs/images/en/image-20250422-100612_f7138c47.png)
2. Switch to the **Artifacts** tab

   ![image-20250422-100801.png](https://docs.testany.io/docs/images/en/image-20250422-100801_93ce92fa.png)
3. Click **Open report** or expand playwright-report → index.html

   ![image-20250422-101002.png](https://docs.testany.io/docs/images/en/image-20250422-101002_2e12ea97.png)

### **Interpreting the Report**

#### **Overview Page**

List of the test cases:

- **✅ Green:** Passed tests
- **❌ Red:** Failed tests

Click a file or test to see details.

#### **Detail Panel**

- **❗ Errors:** error message, expected vs. actual, code location
- 📝 **Test Steps:** recorded interactions with timings (green=success, red=failure)
- **🎥 Videos:** play the full test recording (if video: 'on' or retain-on-failure)
- **🔁 Traces:** download trace.zip to replay in Trace Viewer (npx playwright show-trace trace.zip)

×

## Glossary terms on this page

- [Test Case](https://docs.testany.io/en/docs/glossary.md#test-case)
- [Executor](https://docs.testany.io/en/docs/glossary.md#executor)
- [Environment](https://docs.testany.io/en/docs/glossary.md#environment)
- [Test Script](https://docs.testany.io/en/docs/glossary.md#test-script)
- [Path](https://docs.testany.io/en/docs/glossary.md#path)