Playwright中动态ID邮件行定位与OTP验证测试问题

一、搞定动态ID的问题 #

没必要死磕那个带随机后缀的row_random-xxx ID，直接通过子元素的特征反向定位父行就行。你本来就是要找包含"OTP Verification"的邮件行，完全可以跳过这个动态ID，从文本所在的单元格往上找对应的<tr>。

二、定位同时包含两个特征的行 #

要找同时有"OTP Verification"（邮件标题）和"just now"（时间标记）的行，Playwright提供了两种靠谱的方式：

方式1：用CSS的:has伪类组合筛选 #

直接写一个复合选择器，筛选同时包含两个指定文本单元格的行：

tr:has([role="cell"]:has-text("OTP Verification")):has([role="cell"]:has-text("just now"))

方式2：用locator的filter方法链式过滤 #

先定位所有<tr>，再过滤出同时包含两个目标单元格的行，可读性更强：

const targetRow = page.locator('tr').filter({
  has: page.locator('[role="cell"]', { name: "OTP Verification" }),
  has: page.locator('[role="cell"]', { name: "just now" })
});

三、完整的OTP提取+验证代码示例 #

结合上面的定位逻辑，把整个测试流程补全：

import { test, expect } from "@playwright/test";

test("otp-test", async ({ page }) => {
    // 进入收件箱页面
    await page.goto("someEmailURL");

    // 定位目标邮件行：同时包含OTP标题和"just now"时间标记
    const targetRow = page.locator('tr').filter({
        has: page.locator('[role="cell"]', { name: "OTP Verification" }),
        has: page.locator('[role="cell"]', { name: "just now" })
    });

    // 点击打开邮件
    await targetRow.click();

    // 提取邮件中的OTP（根据实际页面结构调整）
    // 情况1：OTP在单独的元素里，直接定位
    const otpFromEmail = await page.locator('.otp-code').innerText();
    // 情况2：OTP在邮件正文中，用正则匹配提取
    // const emailBody = await page.locator('.email-content').innerText();
    // const otpMatch = emailBody.match(/Your verification code is: (\d{6})/);
    // const otpFromEmail = otpMatch ? otpMatch[1] : '';

    // 假设用户输入的OTP存在这个变量里（实际测试中替换为真实输入值）
    const userInputOtp = "123456";

    // 验证提取的OTP和用户输入是否一致
    expect(otpFromEmail).toBe(userInputOtp);
});

额外提示 #

• 如果"just now"会随时间变成"1 minute ago"这类文本，可以用正则模糊匹配：{ name: /just now|\d+ minute ago/ }。
• 如果只需要最新的OTP邮件，也可以直接取第一个包含"OTP Verification"的行：page.locator('tr').filter({ has: page.locator('[role="cell"]', { name: "OTP Verification" }) }).first()。
• 永远优先用文本、静态class或元素结构定位，别碰动态生成的ID、随机类名这类不稳定属性。

内容的提问来源于stack exchange，提问作者not_hisokaYet