Playwright快速上手：从环境安装到编写第一个自动化测试脚本

# 检查Node.js是否安装
node --version

# 如果未安装，访问Node.js官网下载安装包
# https://nodejs.org/

mkdir playwright-tutorial
cd playwright-tutorial

# 初始化npm项目（一路按回车使用默认值即可）
npm init -y

# 安装Playwright
npm install playwright

# 或者如果你想要TypeScript支持
npm install playwright @types/node @typescript-eslint/eslint-plugin --save-dev

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

(async () => {
const browser = await chromium.launch({ headless: false });
const page = await browser.newPage();
await page.goto('https://www.example.com');
console.log('页面标题:', await page.title());
awaitnewPromise(resolve => setTimeout(resolve, 3000)); // 等待3秒查看效果
await browser.close();
})();

node check-installation.js

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "运行Playwright测试",
      "program": "${workspaceFolder}/node_modules/.bin/jest",
      "args": ["--runInBand"]
    }
  ]
}

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

describe('百度搜索测试', () => {
let browser;
let page;

// 每个测试用例之前运行
  beforeEach(async () => {
    browser = await chromium.launch({ 
      headless: false, // 设置为true可以在后台运行
      slowMo: 500// 放慢操作速度，方便观察
    });
    page = await browser.newPage();
    await page.goto('https://www.baidu.com');
  });

// 每个测试用例之后运行
  afterEach(async () => {
    await browser.close();
  });

  it('应该能够搜索关键词并显示结果', async () => {
    // 定位搜索框并输入内容
    const searchInput = await page.$('#kw');
    await searchInput.type('Playwright自动化测试');
    
    // 点击搜索按钮
    const searchButton = await page.$('#su');
    await searchButton.click();
    
    // 等待搜索结果加载
    await page.waitForSelector('.result');
    
    // 获取第一个结果标题
    const firstResult = await page.$('.c-container h3 a');
    const title = await firstResult.textContent();
    
    console.log('第一个搜索结果:', title);
    
    // 简单的断言
    expect(title).toContain('Playwright');
  });

  it('应该能够处理无结果的情况', async () => {
    // 输入一个不太可能存在的搜索词
    const searchInput = await page.$('#kw');
    await searchInput.type('asdfghjkl1234567890特殊测试词');
    
    const searchButton = await page.$('#su');
    await searchButton.click();
    
    // 等待无结果提示出现
    await page.waitForSelector('.content_none');
    
    const noResultText = await page.textContent('.content_none');
    expect(noResultText).toContain('没有找到');
  });
});

// 运行测试
(async () => {
const { runTests } = require('./test-runner');
await runTests();
})();

// 不推荐 - 过于脆弱
await page.click('#main > div > form > input.submit');

// 推荐 - 使用文本内容
await page.click('text=搜索');

// 推荐 - 使用data-testid属性（需要在开发时添加）
await page.click('[data-testid="search-button"]');

// 推荐 - 使用角色定位
await page.click('button:has-text("Submit")');

// 处理弹窗
page.on('dialog', async dialog => {
console.log(`弹窗消息: ${dialog.message()}`);
await dialog.accept(); // 或 dialog.dismiss()
});

// 等待新窗口打开
const [newPage] = awaitPromise.all([
  page.waitForEvent('popup'),
  page.click('a[target="_blank"]')
]);

// 处理iframe
const frame = page.frame({ name: 'login-frame' });
await frame.fill('#username', 'testuser');

it('失败时截图', async () => {
  try {
    // 测试代码...
  } catch (error) {
    // 保存截图和HTML
    await page.screenshot({ path: 'error-screenshot.png', fullPage: true });
    await page.content().then(html => {
      require('fs').writeFileSync('error-page.html', html);
    });
    throw error;
  }
});

await page.goto('https://example.com', {
  waitUntil: 'networkidle'
});

npm install @playwright/test

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

test('基础测试', async ({ page }) => {
await page.goto('https://www.baidu.com');
await page.type('#kw', 'Playwright');
await page.click('#su');
await page.waitForSelector('.result');

const title = await page.title();
  expect(title).toContain('Playwright');
});

npx playwright test