1.1、安装

  • 初始化安装
// 首先安装node.js  nodejs版本>=12
// 然后任一位置新建文件夹playwright，进入playwright文件夹运行以下命令

// 使用以下安装方式，推荐下面这种 会帮生成一些需要的配置文件不需要自己再创建
// 输入命令后会有一些确认选择，选择默认的就行，按回车就可以
npm init playwright@latest
  • 打开 packgae.json 文件 里面配置
"scripts": {
  "test": "npx playwright test",
  "log": "npx playwright show-report"
}

npm run test   //运行所有的用例脚本
npm run test addUser.spec.js   //运行某一个用例脚本
npm run log  //查看最近一条用例的运行日志
  • 录制测试脚本
// 创建一个存放录制脚本的文件夹useCase放置录制的测试脚本
//useCase/demo.js 录制的脚本保存位置和文件名称，文件名称可自定义
//chromium:录制使用浏览器  http://localhost:8085:录制打开的网页链接
npx playwright codegen --target javascript -o 'useCase/demo.js' -b chromium http://localhost:8085
// 录制后的脚本并不能直接跑，还需要添加一些等待的脚本代码
await page.waitForTimeout(1000);
  • 示例-从登录到新增用户
test('add user', async () => {
  const browser = await chromium.launch({
    headless: false //有头无头模式设置，无头模式,脚本内部运行，不显示浏览器；有头模式，弹出浏览器运行测试脚本，能看到操作步骤
  })
  const context = await browser.newContext()
  const page = await context.newPage()
  await page.goto('http://192.168.168.81:30888/iidp/')
  await page.getByPlaceholder('请输入用户名').click()
  await page.getByPlaceholder('请输入用户名').type('admin', { delay: 50 })
  await page.getByPlaceholder('请输入密码').click()
  await page.getByPlaceholder('请输入密码').type('admin', { delay: 50 })
  await page.waitForTimeout(1000)
  // 断言
  const customerCountInnerText = await page
    .getByPlaceholder('请输入密码')
    .inputValue()
  expect(customerCountInnerText).toBe('admin')
  await page.getByRole('button', { name: '登录' }).click()
  // 延迟等待
  await page.waitForTimeout(1000)
  await page.locator('#sidebar_app_sdk2_button').click()
  await page.waitForTimeout(1000)
  await page.locator('#sdk_test_user_table_toolbar_create').click()
  await page
    .locator('#sdk_test_user_form_main_detail_top_common_items_0_items_2')
    .getByRole('textbox')
    .click()
  await page
    .locator('#sdk_test_user_form_main_detail_top_common_items_0_items_0')
    .getByRole('textbox')
    .click()
  await page
    .locator('#sdk_test_user_form_main_detail_top_common_items_0_items_0')
    .getByRole('textbox')
    .type('sdfsdf', { delay: 50 })
  await page
    .locator('#sdk_test_user_form_main_detail_top_common_items_0_items_1')
    .getByRole('textbox')
    .click()
  await page
    .locator('#sdk_test_user_form_main_detail_top_common_items_0_items_1')
    .getByRole('textbox')
    .type('456@qq.com', { delay: 50 })
  await page
    .locator('#sdk_test_user_form_main_detail_top_common_items_0_items_2')
    .getByRole('textbox')
    .click()
  await page
    .locator('#sdk_test_user_form_main_detail_top_common_items_0_items_3')
    .getByRole('textbox')
    .click()
  await page
    .locator('#sdk_test_user_form_main_detail_top_common_items_0_items_3')
    .getByRole('textbox')
    .type('18', { delay: 50 })
  await page.locator('div').filter({ hasText: '密码' }).nth(2).click()
  await page.locator('input[type="password"]').type('123456', { delay: 50 })
  await page.getByText('9-联动-省 清空 1-30').click()
  await page.waitForTimeout(1000)
  await page.getByRole('listitem').filter({ hasText: '北京市' }).click()
  const provinceVal = await page
    .locator(
      '#sdk_test_user_form_main_detail_top_common_items_0_items_18 input'
    )
    .inputValue()
  expect(provinceVal).not.toBe('')
  await page
    .locator('#sdk_test_user_form_main_detail_top_common_items_0_items_19')
    .getByPlaceholder('请选择')
    .click()
  await page.waitForTimeout(1000)
  await page.getByRole('listitem').getByText('北京市').click()
  await page
    .locator('#sdk_test_user_form_main_detail_top_common_items_0_items_20')
    .getByPlaceholder('请选择')
    .click()
  await page.waitForTimeout(1000)
  await page.getByRole('listitem').filter({ hasText: '朝阳区' }).click()
  await page.getByRole('button', { name: '保存', exact: true }).click()
  await page.waitForTimeout(2000)

  // 多tab模式
  const page2 = await context.newPage()
  await page2.goto('http://192.168.175.198:30600/iidp/')
  // 下面写第二个tab页的测试用例

  await page.close()
  // ---------------------
  await context.close()
  await browser.close()
})

  • 文档链接

    英文文档 https://playwright.dev/docs/intro
    中文文档 https://zhuanlan.zhihu.com/p/604028393

Table of Contents