Playwright(Angular)断言非空数组时误判为空数组导致测试失败

核心问题排查方向 #

你遇到的矛盾现象（调试时数组正常，断言时为空），大概率是自动化执行时序问题或定位器匹配错误导致的，以下是具体解决步骤：

1. 确认定位器是否指向单个选项元素 #

你的allInnerTexts()返回长度为1的数组，说明定位器可能匹配的是整个下拉容器而非单个选项。比如如果下拉是<select>组件，应该定位到<option>元素；如果是自定义下拉（如React Select、AntD Select），要定位到每个选项的子元素（如.ant-select-item-option-content）。

错误的定位器会把所有选项的文本合并成一个字符串，且如果容器未展开，断言时会返回空数组。

2. 确保下拉列表已展开再获取选项 #

自动化执行时，下拉列表默认是收起状态，选项元素可能不在DOM中或不可见。必须先触发展开操作，再等待选项加载完成：

async getDropdownListOptions(): Promise<string[]> {
    // 第一步：点击下拉触发器展开选项
    await this.page.locator('你的下拉触发器定位器').click();
    // 第二步：等待选项元素可见，确保DOM已渲染
    const optionsLocator = this.page.locator('my locator query here');
    await optionsLocator.waitFor({ state: 'visible', timeout: 5000 });
    // 第三步：获取所有选项文本
    return await optionsLocator.allInnerTexts();
}

3. 打印断言前的真实值 #

调试时的快照可能和断言时的实际值不符，在断言前添加精准打印：

const ddlList = await getDropdownListOptions();
console.log('断言前ddlList长度:', ddlList.length);
console.log('断言前ddlList内容:', JSON.stringify(ddlList));
expect(ddlList).toEqual(expectedList);

这能帮你确认断言时数组是否真的为空，排除日志的视觉误导。

4. 替换allInnerTexts()为逐个获取文本 #

如果allInnerTexts()仍有问题，尝试逐个获取每个选项的文本内容：

async getDropdownListOptions(): Promise<string[]> {
    await this.page.locator('你的下拉触发器定位器').click();
    const options = await this.page.locator('my locator query here').all();
    // 逐个获取textContent并过滤空值
    return Promise.all(options.map(opt => opt.textContent())).then(texts => texts.filter(Boolean) as string[]);
}

5. 检查是否有异步加载逻辑 #

如果下拉选项是通过接口异步加载的，需要等待网络请求完成或加载状态消失：

// 等待特定网络请求完成（示例：等待获取选项的接口）
await this.page.waitForResponse(response => response.url().includes('/api/options') && response.ok());
// 再执行展开和获取操作

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