Playwright测试中expect.toBeVisible验证Logout按钮失败问题

核心问题 #

你的测试代码里登录步骤写错了——最后一步你点击的是密码输入框（//input[@id='loginpassword']），而非登录按钮，导致登录操作根本没执行。未登录状态下，Logout按钮默认处于隐藏状态，所以toBeVisible()断言必然失败。

错误日志解读 #

错误信息里反复出现unexpected value "hidden"，说明程序确实定位到了Logout按钮元素，但该元素的可见性状态为隐藏，本质原因是登录流程未完成。

修复后的完整代码 #

let { test, expect } = require("@playwright/test");

test("验证登录后Logout按钮可见", async ({ page }) => {
  await page.goto("https://www.demoblaze.com/");

  // 点击页面顶部的登录按钮
  await page.locator("#login2").click();

  // 输入用户名
  await page.fill("#loginusername", "pavanol");

  // 输入密码
  await page.fill("input[id='loginpassword']", "test@123");

  // 点击登录弹窗里的「Log in」按钮（修正核心错误）
  await page.click("//button[normalize-space()='Log in']");

  // 定位Logout按钮
  const logoutLink = page.locator("//a[normalize-space()='Log out']");

  // 断言按钮可见
  await expect(logoutLink).toBeVisible();
  
  await page.close();
});

额外优化建议 #

• 优先使用更稳定的定位器，比如直接用ID定位Logout按钮：page.locator("#logout2")，比XPath更简洁可靠
• 可添加登录成功的前置验证，比如等待用户名显示，确保页面状态稳定后再断言Logout按钮：

  await expect(page.locator("#nameofuser")).toHaveText("Welcome pavanol");
  

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