Skip to main content

        常用api汇总 - Featured image

常用api汇总

常用的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/' }