QA求助：如何用Playwright+TypeScript测试AG Grid动态位置项目？

针对你遇到的AG Grid中项目位置动态变化的验证需求，这里有几个实用的解决思路，结合Playwright+TypeScript+Cucumber的技术栈给出具体实现：

方法1：直接定位包含目标项目标识的行 #

不管项目在网格的哪个位置，直接通过项目的**唯一标识（名称/ID）**定位对应的行，断言其存在即可。Playwright的定位器支持灵活的文本过滤，无需依赖固定位置：

// 在Cucumber的Then步骤中实现
Then("我能在项目列表中看到新建的项目 {string}", async function (projectName: string) {
  // 定位AG Grid中包含目标项目名称的行
  const targetRow = page.getByRole('row').filter({ hasText: projectName });
  
  // 断言该行存在，等待最多5秒
  await expect(targetRow).toBeVisible({ timeout: 5000 });
});

如果项目名称可能重复，建议用唯一的项目ID来定位，比如结合单元格的选择器：

const targetRow = page.locator('.ag-row').filter({ has: page.locator('.ag-cell', { hasText: 项目唯一ID }) });
await expect(targetRow).toBeVisible();

方法2：提取网格所有数据进行校验 #

如果需要更严谨的验证（比如同时检查项目的多个属性），可以通过Playwright的evaluate方法获取AG Grid的行数据，再在代码中校验是否包含目标项目：

Then("新建的项目 {string}应出现在项目列表中", async function (projectName: string) {
  // 等待网格加载完成（可根据实际页面的加载状态调整）
  await page.waitForSelector('.ag-body-viewport');
  
  // 从页面中获取AG Grid的所有行数据
  const allProjects = await page.evaluate(() => {
    // 假设页面中AG Grid的实例可通过window.gridOptions访问，或通过选择器定位
    const grid = document.querySelector('.ag-grid') as any;
    return grid.api.getAllRows().map((row: any) => row.data);
  });
  
  // 校验是否存在目标项目
  const isProjectExist = allProjects.some(project => project.name === projectName);
  expect(isProjectExist).toBeTruthy();
});

注意：如果页面无法直接访问AG Grid实例，也可以通过遍历所有单元格文本的方式获取数据，不过效率略低：

const allCellTexts = await page.locator('.ag-cell').allTextContents();
expect(allCellTexts).toContain(projectName);

方法3：结合Cucumber的场景上下文传递数据 #

在创建项目的步骤中保存项目的唯一标识（比如名称/ID），然后在验证步骤中直接使用该数据，避免硬编码：

// When步骤：创建项目并保存名称到上下文
When("我创建一个名为 {string} 的项目", async function (projectName: string) {
  // 执行创建项目的操作...
  await page.fill('#project-name-input', projectName);
  await page.click('#create-project-btn');
  
  // 将项目名称存入Cucumber上下文
  this.currentProjectName = projectName;
});

// Then步骤：使用上下文数据验证
Then("该项目应出现在项目列表中", async function () {
  const targetRow = page.getByRole('row').filter({ hasText: this.currentProjectName });
  await expect(targetRow).toBeVisible();
});

额外注意事项 #

• 等待网格加载：AG Grid数据加载可能是异步的，一定要添加等待逻辑（比如waitForSelector或waitForResponse），避免断言时机过早导致失败。
• 处理分页：如果项目列表有分页，需要先检查当前页是否存在，不存在则遍历分页查找（可封装成循环逻辑）。
• 避免依赖固定索引：绝对不要用nth(index)来定位行，因为位置动态变化会导致测试不稳定。

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