常用的playwright函数
页面导航、等待、表单、交互、弹窗的常用 API:
| 分类 | 方法 / 属性 | 说明 |
| 页面导航 | page.goto(url[, options]) | 打开页面 |
| page.reload([options]) | 刷新页面 | |
| page.goBack([options]) | 后退 | |
| page.goForward([options]) | 前进 | |
| 等待机制 | page.waitForLoadState([state, options]) | 等待加载完成 |
| page.waitForSelector(selector[, options]) | 等待元素出现/消失 | |
| page.waitForResponse(fn[, options]) | 等待指定请求响应 | |
| page.waitForFunction(pageFn[, arg, options]) | 自定义等待条件 | |
| 元素定位 | page.locator(selector) | 通用定位器 |
| page.getByRole(role, options) | 根据角色定位 | |
| getByTestId() | 根据自定义的data-testid定位 | |
| page.getByPlaceholder(text) | 输入框 placeholder | |
| page.getByLabel(text) | 表单 label | |
| page.getByText(text) | 根据文本定位 | |
| 表单操作 | page.fill(selector, value) | 输入框(清空后填入) |
| page.type(selector, text[, options]) | 模拟逐字输入 | |
| page.press(selector, key) | 在元素上按键 | |
| page.selectOption(selector, values) | 下拉菜单选择 | |
| page.check(selector[, options]) | 勾选复选框/单选框 | |
| page.uncheck(selector[, options]) | 取消勾选 | |
| page.setInputFiles(selector, files) | 文件上传 | |
| 基础交互 | page.click(selector[, options]) | 点击元素 |
| page.dblclick(selector[, options]) | 双击 | |
| page.hover(selector[, options]) | 悬停 | |
| page.mouse.move(x, y) | 鼠标移动 | |
| page.mouse.click(x, y[, options]) | 鼠标点击 | |
| page.dragAndDrop(src, dest[, options]) | 拖拽元素 | |
| 弹窗处理 | page.on('dialog', handler) | 监听对话框事件 |
| dialog.message() | 获取弹窗文本 | |
| dialog.accept([promptText]) | 确认(可输入内容) | |
| dialog.dismiss() | 取消 | |
| 截图与断言 | page.screenshot({ path }) | 截图保存 |
| page.textContent(selector) | 获取文本内容 | |
| expect(locator).toHaveText(text) | 断言文本(需用@playwright/test) |
数据提取与验证相关 API
| 方法 | 说明 | 示例 |
| page.textContent(selector) | 获取元素文本内容 | await page.textContent('#msg') |
| page.innerText(selector) | 获取渲染后的纯文本 | await page.innerText('#msg') |
| page.innerHTML(selector) | 获取元素 HTML | await page.innerHTML('#content') |
| page.getAttribute(selector, name) | 获取属性值 | await page.getAttribute('#btn', 'class') |
| page.$eval(selector, fn) | 在元素上执行函数 | await page.$eval('#logo', el => el.tagName) |
| page.$$eval(selector, fn) | 批量执行函数 | await page.$$eval('.item', els => els.length) |
| page.isVisible(selector) | 是否可见 | await page.isVisible('#dialog') |
| page.isHidden(selector) | 是否隐藏 | await page.isHidden('#loading') |
| page.isEnabled(selector) | 是否启用 | await page.isEnabled('#submit') |
| page.isDisabled(selector) | 是否禁用 | await page.isDisabled('#submit') |
| page.isChecked(selector) | 是否选中 | await page.isChecked('#agree') |
断言与验证
验证文本
expect(locator).toHaveText(value)
示例:expect(page.locator(‘h1’)).toHaveText(‘欢迎’)
验证输入框值
expect(locator).toHaveValue(value)
示例:expect(page.locator(’#user’)).toHaveValue(’test’)
验证属性
expect(locator).toHaveAttribute(name, value)
示例:expect(page.locator(’#btn’)).toHaveAttribute(’type’, ‘submit’)
元素可见
expect(locator).toBeVisible()
示例:expect(page.locator(’#msg’)).toBeVisible()
元素隐藏
expect(locator).toBeHidden()
示例:expect(page.locator(’#loading’)).toBeHidden()
元素启用
expect(locator).toBeEnabled()
示例:expect(page.locator(’#submit’)).toBeEnabled()
元素禁用
expect(locator).toBeDisabled()
示例:expect(page.locator(’#submit’)).toBeDisabled()
元素已选中
expect(locator).toBeChecked()
示例:expect(page.locator(’#agree’)).toBeChecked()
页面标题验证
expect(page).toHaveTitle(title)
示例:expect(page).toHaveTitle(/Dashboard/)
页面 URL 验证
expect(page).toHaveURL(url)
示例:expect(page).toHaveURL(‘https://example.com/dashboard')
截图与录制
| 方法 | 说明 | 示例 |
| page.screenshot(options) | 页面截图 | await page.screenshot({ path: 'page' }) |
| locator.screenshot(options) | 元素截图 | await page.locator('#logo').screenshot({ path:'logo'}) |
| context = browser.newContext({recordVideo}) | 开启视频录制 | recordVideo: { dir: 'videos/' } |