DEV Community

PIPULPANT
PIPULPANT

Posted on

🚀 Integrating Zephyr Scale with Playwright: A Step-by-Step Guide 🧩

Playwright is a popular open-source framework for end-to-end testing, while Zephyr Scale (or Squad) is a powerful test management tool that integrates seamlessly with Jira. Combining the two can supercharge your testing workflows by enabling automated test results to sync with your test cases in Zephyr Scale. This blog will guide you through the process with easy-to-follow steps and code examples. 🎉

🎯 Why Integrate Playwright with Zephyr Scale?

  1. Centralized Test Management: Keep all your manual and automated test cases in one place.
  2. Enhanced Reporting: Sync Playwright test results directly with your Zephyr Scale dashboard.
  3. Seamless Collaboration: Enable QA and development teams to collaborate more effectively.

🛠️ Prerequisites
Before we start, ensure you have the following:

  1. Jira Access: A Jira project integrated with Zephyr Scale or Squad.
  2. API Token: A Zephyr Scale API token for authentication.
  3. Playwright Setup: A working Playwright project.
  4. Node.js Installed: Required for Playwright and npm packages.

📝 Step 1: Install the Playwright-Zephyr Reporter
Start by installing the playwright-zephyr reporter package:

npm install -D playwright-zephyr

🔧 Step 2: Configure Playwright to Use Zephyr Scale
Edit your playwright.config.ts file to include the Zephyr reporter. Here's an example configuration:

import { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = {
  reporter: [
    ['playwright-zephyr/lib/src/cloud', {
      projectKey: 'QA', // Replace 'QA' with your Zephyr project key
      authorizationToken: process.env.ZEPHYR_AUTH_TOKEN, // Set this in your environment
      autoCreateTestCases: true, // Automatically create test cases if they don't exist
    }],
  ],
  // Add your Playwright test settings below
};
export default config;
Enter fullscreen mode Exit fullscreen mode

🛠️ Key Points:

  1. projectKey: Found in your Jira project URL (e.g., https://yourdomain.atlassian.net/jira/software/projects/QA/boards/654 where QA is the project key).
  2. authorizationToken: Use your Zephyr Scale API token here.

📝 Step 3: Annotate Your Tests with Test Case IDs 🏷️
Zephyr Scale maps Playwright test results to test cases using test case IDs. Add these IDs to your test titles:

import { test, expect } from '@playwright/test';
test('[QA-123] Verify login functionality', async ({ page }) => {
  await page.goto('https://example.com/login');
  await page.fill('#username', 'testuser');
  await page.fill('#password', 'password123');
  await page.click('#loginButton');
  expect(await page.title()).toBe('Dashboard');
});
Enter fullscreen mode Exit fullscreen mode

🎬 Step 4: Run Your Tests and Sync Results
Run your Playwright tests using the following command:

npx playwright test

The reporter will automatically publish the results to Zephyr Scale. 🚀

🛠️ Step 5: Verify Test Results in Zephyr Scale
Log in to your Zephyr Scale dashboard.
Navigate to your project.
Check the test cases for updated execution results. ✅

🔍 Troubleshooting Common Issues 🐛
Error: projectKey must match "([A-Z][A-Z_0-9]+)"

Ensure your projectKey follows the correct format: uppercase letters, underscores, and digits only.

  1. Test Results Not Syncing
    Check the logs for errors.
    Verify your API token and project key.

  2. Authentication Issues
    Ensure your ZEPHYR_AUTH_TOKEN is set as an environment variable.

🧩 Sample Code Repository
Here's a simplified structure of your Playwright project with Zephyr integration:
├── tests/
│ ├── login.spec.ts
├── playwright.config.ts
├── package.json

🚀 Wrapping Up
Integrating Playwright with Zephyr Scale bridges the gap between automated testing and test management. It helps teams centralize testing workflows, streamline reporting, and collaborate effectively. By following this guide, you'll have a seamless integration that enhances your QA process. 💻✨

💡 Pro Tip: Always keep your Zephyr test cases updated and well-documented to avoid inconsistencies in mapping.

Do you have any questions or need more help? Drop your queries below! 💬
Happy Testing! 🧪🚀

Top comments (0)