Playwright测试执行分类及地点选择后无法点击搜索按钮求助

在Playwright测试中，即使添加了等待操作，点击搜索按钮仍然失败。但移除selectParentClassificationByText()、selectClassificationByText()和typeWhereBoxField()这几个操作后，测试就能正常点击搜索按钮。相关代码和错误信息如下：

页面对象代码（searchBoxPage.js） #

class SearchBoxPage {

    constructor(page) {
        this.page = page;
        this.searchBtnLocator = 'button[data-automation="searchButton"]';
    }

    async getSearchButton() {
        await this.page.click(this.searchBtnLocator); // 点击搜索按钮
    }

}

module.exports = SearchBoxPage;

测试用例代码（jobSearch.spec.js） #

test('输入playwright，选择Testing & QA并选择All Brisbane', async ({ page }) => {
    const searchPage = new SearchBoxPage(page);
    const browser = await chromium.launch({ 
      headless: true
     });
    page = await browser.newPage();
    await searchPage.typeSearchQuery("cypress");
    await searchPage.clickClassificationField();
    await searchPage.selectParentClassificationByText("Information & Communication Technology");
    await searchPage.selectClassificationByText("Testing & Quality Assurance");
    await searchPage.typeWhereBoxField("All Brisbane QLD");
    await page.waitForTimeout(2000);
    await page.waitForSelector('button[data-automation="searchButton"]');
    await searchPage.getSearchButton();
    const totalCount = await searchPage.getJobsCountHeader();
    console.log("获取到的职位数量::"+totalCount);
    const totalCountValue = parseInt(totalCount);
    expect(totalCountValue).toBeGreaterThan(10);
    await page.close();
  });

错误信息 #

at pageObjects\searchBoxPage.js:61

  59 |
  60 |     async getSearchButton() {
> 61 |         await this.page.click(this.searchBtnLocator); // 点击搜索按钮
     |                         ^
  62 |     }
  63 |
  64 |

    at SearchBoxPage.getSearchButton (C:\work\realestate\tests\pageObjects\searchBoxPage.js:61:25)
    at C:\work\realestate\tests\jobSearch.spec.js:39:22

以下是几个针对性的解决办法，按优先级尝试：

1. 修复测试用例的page实例冲突
   测试用例同时使用了Playwright测试上下文的page参数，又手动启动浏览器创建了新的page，导致页面对象绑定的旧page和实际操作的新page不一致，这是核心问题之一：

// 错误原因：searchPage绑定的是测试参数的旧page，后续操作却在手动创建的新page上
test('...', async ({ page }) => {
    const searchPage = new SearchBoxPage(page); 
    const browser = await chromium.launch({ headless: true });
    page = await browser.newPage(); // 重新赋值page，searchPage仍用旧实例
});

修复方法二选一：

• 直接用测试上下文的page，无需手动启动浏览器：

  test('...', async ({ page }) => {
      const searchPage = new SearchBoxPage(page);
      await searchPage.typeSearchQuery("cypress");
      // 后续所有操作基于这个page
  });
  

• 手动启动浏览器时，不要使用测试参数的page：

  test('...', async () => { // 去掉参数中的page
      const browser = await chromium.launch({ headless: true });
      const page = await browser.newPage();
      const searchPage = new SearchBoxPage(page);
      await searchPage.typeSearchQuery("cypress");
      // 后续所有操作基于这个page
  });
  

2. 替换硬等待为智能可交互等待
   硬等待page.waitForTimeout(2000)不可靠，改用Playwright内置的状态等待，确保按钮可见且可点击：

// 替换原有的waitForTimeout和waitForSelector
await page.waitForSelector('button[data-automation="searchButton"]', { state: 'visible', timeout: 5000 });
await page.waitForSelector('button[data-automation="searchButton"]', { state: 'enabled', timeout: 5000 });
// 或者直接在点击时设置等待条件
await this.page.click(this.searchBtnLocator, { timeout: 5000 });

3. 检查分类选择后的页面状态
   执行分类选择和地址输入后，页面可能有异步请求、下拉菜单未收起遮挡按钮：

• 添加网络空闲等待：await page.waitForLoadState('networkidle');
• 如果分类选择是下拉框，选择后手动关闭下拉：await page.click('body');（需确认页面无其他冲突元素）

4. 确认定位器的准确性
   确保搜索按钮的定位器没有转义错误，能唯一匹配目标元素：

// 直接用双引号包裹属性值，避免HTML转义问题
this.searchBtnLocator = 'button[data-automation="searchButton"]';

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