【Playwright】Xpath语法简单讲解_playwright基于xpath执行命令-CSDN博客

本文链接：https://blog.csdn.net/m0_45863636/article/details/148085034

//元素[@属性=’属性值‘]

从当前节点出发遍历整个文档

/body/div/div/div[@class='login-button']

只在根节点（HTML 的最外层）下查找直接子元素

不加

/body/div/div/div[@class='login-button'] 绝对路径，匹配速度较快（但微乎不计）

//（补充）

返回所有匹配项，若只需要第一个，在后面加[1]即可

a[10] 当前节点子元素里选择第10个<a>标签

this.defalt10 = "//div[@class= 'default-keyword-list']/a[10]"

注意此处是/a[10] 即之查找直接子元素换成//即为查找div下所有

元素

div/input/...

[@='']

@选取属性 & ''属性的值

this.username_input_xpath = "//input[@placeholder='请输入手机号']";

模糊匹配	//div[contains(@class, 'button')]

[text()=’‘]

匹配元素的文本内容，一般用于

<div>账号登录</div>

this.pwd_way_xpath = "//div[text()='账号登录']"//

填入账号密码的处理对比

//登录页 class LoginPage { constructor(page) { this.title = "Login Page"; this.page = page; this.login_button_xpath = "//div[@class='login-button']";//登录按钮找到页面中所有 class 为 login-button 的 div 元素。 this.username_input_xpath = "//input[@placeholder='请输入手机号']";//用户名输入框 this.password_input_xpath = "//input[@placeholder='密码为数字、英文、符号的组合']"; this.pwd_way_xpath = "//div[text()='账号登录']"// } async goto(url) { await this.page.goto(url) } async clickLoginButton() { await this.page.locator(this.login_button_xpath).click() } async clickPwdWay() { await this.page.locator(this.pwd_way_xpath).click() } async inputUsername(username) { await this.page.locator(this.username_input_xpath).fill(username) } async inputPassword(password) { await this.page.locator(this.password_input_xpath).fill(password) } } module.exports = LoginPage;	//创建新页面 const page = await browser.newPage(); const mobile = "zsbd"; const password = "zsbd"; try { //访问kook账号密码登录页面 await page.goto("KOOK"); //输入账号密码 await page.fill('input[placeholder="请输入手机号"]', mobile); await page.fill('input[type="password"]', password); //或者 placeholder="密码为数字、英文、符号的组合"
高维护性，易复用，适合复杂场景	快速实现，适合简单场景（不考虑密码明文泄露的情况，缺陷是当kookpc端登录的时候会首先触发快捷登录页面，无法跳转到密码登录页面）

//登录页

class LoginPage {
constructor(page) {
this.title = "Login Page";
this.page = page;
this.login_button_xpath = "//div[@class='login-button']";//登录按钮找到页面中所有 class 为 login-button 的 div 元素。
this.username_input_xpath = "//input[@placeholder='请输入手机号']";//用户名输入框
this.password_input_xpath = "//input[@placeholder='密码为数字、英文、符号的组合']";
this.pwd_way_xpath = "//div[text()='账号登录']"//
}

async goto(url) {
await this.page.goto(url)
}

async clickLoginButton() {
await this.page.locator(this.login_button_xpath).click()
}
async clickPwdWay() {
await this.page.locator(this.pwd_way_xpath).click()
}
async inputUsername(username) {
await this.page.locator(this.username_input_xpath).fill(username)
}

async inputPassword(password) {
await this.page.locator(this.password_input_xpath).fill(password)
}
}

module.exports = LoginPage;

//创建新页面
const page = await browser.newPage();
const mobile = "zsbd";
const password = "zsbd";
try {
//访问kook账号密码登录页面
await page.goto("KOOK");

//输入账号密码
await page.fill('input[placeholder="请输入手机号"]', mobile);
await page.fill('input[type="password"]', password); //或者 placeholder="密码为数字、英文、符号的组合"

高维护性，易复用，适合复杂场景

快速实现，适合简单场景（不考虑密码明文泄露的情况，缺陷是当kookpc端登录的时候会首先触发快捷登录页面，无法跳转到密码登录页面）