npm install playwright kafkajs

import { Kafka } from 'kafkajs';

const kafka = new Kafka({
  clientId: 'playwright-test',
  brokers: ['localhost:9092'], // Kafka 服务器地址
});

const producer = kafka.producer();
const consumer = kafka.consumer({ groupId: 'playwright-test-group' });

async function produceMessage(topic: string, message: string) {
  await producer.send({
    topic,
    messages: [
      { value: message },
    ],
  });
}

async function consumeMessage(topic: string) {
  await consumer.connect();
  await consumer.subscribe({ topic, fromBeginning: true });

  // 消费消息并返回
  return new Promise<string>((resolve, reject) => {
    consumer.run({
      eachMessage: async ({ message }) => {
        resolve(message.value.toString());
      },
    });
  });
}

export { produceMessage, consumeMessage };

import { test, expect } from '@playwright/test';
import { produceMessage, consumeMessage } from './kafkaClient'; // 引入 Kafka 客户端

test('验证 Kafka 消息推送', async () => {
  const topic = 'test-topic'; // Kafka 主题
  const message = 'Hello from Playwright!';

  // 先启动消费者
  const consumePromise = consumeMessage(topic);

  // 使用 Playwright 执行用户操作，触发 Kafka 消息推送
  await page.goto('https://your-app-url.com'); // 访问应用页面
  await page.click('button#triggerKafkaEvent'); // 触发某个事件，后台推送 Kafka 消息

  // 推送 Kafka 消息
  await produceMessage(topic, message);

  // 验证消息是否被正确推送
  const receivedMessage = await consumePromise;
  expect(receivedMessage).toBe(message); // 验证收到的消息与期望的消息相同
});

// Playwright 配置和初始化
const { devices, chromium } = require('playwright');

const android = devices['Pixel 5'];  // 使用 Pixel 5 模拟器
const browser = await chromium.launch();
const context = await browser.newContext({
  ...android, // 模拟器配置
});
const page = await context.newPage();

// Page Object 示例：LandingPage
class LandingPage {
  constructor(page) {
    this.page = page;
    this.loginButton = page.locator('#login');
  }

  async clickLogin() {
    await this.loginButton.click();
  }
}

export default LandingPage;

// 测试用例示例
import { test, expect } from '@playwright/test';
import LandingPage from './LandingPage';

test('登录测试', async ({ page }) => {
  const landingPage = new LandingPage(page);
  await landingPage.clickLogin();
  // 检查是否成功跳转到登录页面
  expect(page.url()).toBe('https://example.com/login');
});

{
  "scripts": {
    "test": "adb devices && playwright test --config=playwright.config.ts"
  }
}

// 更新后的 Fixture 示例
test.beforeEach(async ({ page }) => {
  await page.context().clearCookies();
  await page.context().clearCache();
});

test.afterEach(async ({ page }) => {
  await page.close();
});

test.afterEach(async ({ page }, testInfo) => {
  if (testInfo.status === 'failed') {
    await page.screenshot({ path: `./test-results/${testInfo.title}.png` });
  }
});

npx playwright show-report

playwright.config.ts 
package.json 
tests/ 
  example.spec.ts

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

test('Salary Insights Test - Simple', async ({ page }) => {
  await page.goto("/dev/salary-insights");
  await page.waitForLoadState("load");

  const role = "QA Engineer";
  const country = "Canada";

  await page.locator('role-dropdown-selector').click();
  await page.fill('role-input-selector', role);
  await page.click(`text=${role}`);

  await page.click('country-dropdown-selector');
  await page.fill('country-input-selector', country);
  await page.click(`text=${country}`);

  await page.click('search-button-selector');

  await expect(page.locator('filter-container').getByText(role)).toBeVisible();
  await expect(page.locator('filter-container').getByText(country)).toBeVisible();

  const compensationDetails = await page.locator('compensation-details-selector').innerText();
  expect(compensationDetails).toContain(role);
  expect(compensationDetails).toContain(country);
});

const testData = [
  { role: "QA Engineer", country: "Canada" },
  { role: "QA Engineer", country: "Brazil" },
  { role: "DevOps Engineer", country: "United States" },
  { role: "DevOps Engineer", country: "United Kingdom" },
];

test.describe("Salary Insights Tests Naive", () => {
  testData.forEach(({ role, country }) => {
    test(`Should display correct compensation info for ${role} in ${country}`, async ({ page }) => {
      await page.goto("/dev/salary-insights");
      await page.waitForLoadState("load");

      await page.locator('role-dropdown-selector').click();
      await page.fill('role-input-selector', role);
      await page.click(`text=${role}`);
      
      // 继续你的测试逻辑...
    });
  });
});

[
  { "role": "QA Engineer", "country": "Canada" },
  { "role": "QA Engineer", "country": "Brazil" },
  { "role": "DevOps Engineer", "country": "United States" },
  { "role": "DevOps Engineer", "country": "United Kingdom" }
]

import { test, expect } from '@playwright/test';
import * as fs from 'fs';
import * as path from 'path';

interface TestData {
  role: string;
  country: string;
}

const testDataPath = path.resolve(__dirname, "data", "salary_insights.json");
let salaryTestData: TestData[];

try {
  const rawData = fs.readFileSync(testDataPath, "utf8");
  salaryTestData = JSON.parse(rawData) as TestData[];
} catch (error) {
  console.error("Error reading or parsing salary_insights.json:", error);
  process.exit(1); // Exit the process with an error code
}

test.describe("Salary Insights Tests From a JSON file", () => {
  salaryTestData.forEach(({ role, country }) => {
    test(`Should display correct compensation info for ${role} in ${country}`, async ({ page }) => {
      await page.goto("/dev/salary-insights");
      await page.waitForLoadState("load");
      
      // 继续你的测试逻辑...
    });
  });
});

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

test.describe('Dynamic Salary Insights Test from API', () => {
  test('Should display correct compensation info from API', async ({ page }) => {
    const response = await fetch("https://api.example.com/roles-and-countries");
    const data = await response.json();

    for (let { role, country } of data) {
      test(`Should display correct compensation info for ${role} in ${country}`, async () => {
        // 用从API获取的数据继续编写测试...
      });
    }
  });
});