Playwright单条测试用例失败求助：未标星待办星标颜色验证失败

问题概述 #

在Todos.spec.ts中编写的测试用例里，其余用例运行正常，但验证未标星待办项星标为灰色的用例执行失败。测试代码如下：

test("Unstarred todos should have grey stars.",async({page})=>{
    await loginViaUI(page, process.env.EMAIL_ADDRESS as string , process.env.PASSWORD_1 as string);
    await page.waitForURL("http://localhost:8788/Projects/");
    await page.getByRole("link",{name:"Science"}).click();

    
    const starButtonOfFirstTodo = page.locator('li').filter({ hasText: 'Do homework.Click' }).getByLabel('Click to star this todo.')

    const starButtonOfSecondTodo = page.locator('li').filter({ hasText: 'Do homeworkDo for 3 hours.Click' }).getByLabel('Click to star this todo.')

    //Both todos should be unstarred, so their stars should be grey in color.
    expect(starButtonOfFirstTodo).toHaveCSS("background-color","grey");
    expect(starButtonOfSecondTodo).toHaveCSS("background-color","grey");

});

//Code for loginViaUI
export async function loginViaUI(page:Page, email:string, password:string){
    console.log("Logging in via UI");
    
    await page.goto("/Login");
    await page.getByLabel('Email').click();
    await page.getByLabel('Email').fill(email);
    await page.getByLabel('Email').press('Tab');
    await page.getByLabel('Password', { exact: true }).fill(password);
    await page.getByLabel('Password', { exact: true }).press('Tab');

    await page.getByRole('button', { name: 'Login' }).click({delay:250})
}

已在Chromium和Firefox的Playwright UI模式下运行测试，所有标签页（Locator、Source、Call等）均无输出。

排查与解决步骤 #

1. 修正定位器准确性 #

• 当前用li+完整文本过滤的方式可能存在匹配误差，比如'Do homework.Click'可能是待办项文本和按钮文本的错误拼接，实际页面中两者是分离的。
• 优化定位逻辑：
  • 改用模糊文本匹配，只匹配待办项核心文本：

    const starButtonOfFirstTodo = page.locator('li').filter({ hasText: 'Do homework' }).getByLabel('Click to star this todo.')
    

  • 优先使用元素的data-testid属性定位，避免依赖文本：

    const starButtonOfFirstTodo = page.locator('[data-testid="todo-item"]').filter({ hasText: 'Do homework' }).getByLabel('Click to star this todo.')
    

  • 在Playwright UI模式的Locator标签页输入定位器表达式，手动验证是否能精准命中目标元素。

2. 适配CSS颜色值格式 #

• 浏览器返回的background-color值通常不是grey，而是十六进制（#808080）、RGB（rgb(128, 128, 128)）或RGBA格式，直接断言grey会失败。
• 调整断言逻辑：
  • 使用浏览器实际返回的颜色值：

    expect(starButtonOfFirstTodo).toHaveCSS("background-color", "rgb(128, 128, 128)");
    

  • 用正则匹配忽略可能的透明度差异：

    expect(starButtonOfFirstTodo).toHaveCSS("background-color", /rgb\(128, 128, 128\)/);
    

  • 右键星标元素→检查→在开发者工具Styles面板中查看计算后的实际颜色值。

3. 确保元素状态稳定 #

• 点击Science项目后，待办项可能未完全渲染就执行断言，导致状态不稳定。
• 增加等待逻辑：
  • 等待星标元素可见：

    await starButtonOfFirstTodo.waitFor({ state: 'visible' });
    await starButtonOfSecondTodo.waitFor({ state: 'visible' });
    

  • 等待页面资源加载完成：

    await page.getByRole("link",{name:"Science"}).click();
    await page.waitForLoadState('networkidle');
    

4. 替换颜色断言为状态类断言 #

• 未标星状态可能通过CSS类（如unstarred）控制，直接断言颜色容易受样式优先级影响。
• 改为断言元素类名：

  expect(starButtonOfFirstTodo).toHaveClass('unstarred'); // 替换为实际的未标星类名
  

• 检查星标按钮的HTML结构，确认未标星状态的标识方式（类名、自定义属性等）。

5. 保证测试数据一致性 #

• 之前的测试用例可能修改了待办项状态，导致当前测试运行时数据脏污。
• 重置测试环境：
  • 在测试开始前调用API清空或初始化待办项数据，确保每次测试都在干净环境中运行。
  • 增加前置步骤，确保目标待办项处于未标星状态：

    // 若星标已激活，点击取消
    if(await starButtonOfFirstTodo.getAttribute('aria-checked') === 'true'){
      await starButtonOfFirstTodo.click();
    }
    

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