使用Playwright搭配Chai时无法检查元素可见性的问题求助

核心问题 #

Chai本身不支持Playwright元素的状态断言（比如可见性），必须依赖专门的插件；另外你的配置缺少了插件启用和should接口初始化步骤，导致两种写法都报错。

解决步骤 #

1. 安装必要依赖

除了@types/chai，还需要安装Chai本体、chai-playwright插件及对应的类型包：

npm install chai chai-playwright @types/chai-playwright --save-dev

2. 正确配置Chai

在测试文件开头导入并配置Chai，启用插件并初始化should接口（如果要用should风格断言）：

import chai from 'chai';
import chaiPlaywright from 'chai-playwright';

// 启用chai-playwright插件，让Chai识别Playwright元素
chai.use(chaiPlaywright);
// 初始化should接口，支持should风格断言
chai.should();

// 导出Chai的expect供测试使用
const expectChai = chai.expect;

3. 正确的断言写法

• expect风格（解决第一个报错）：

// 检查加载器不可见
expectChai(this.page.locator(this.loader)).not.to.be.visible;

• should风格（解决第二个报错）：

// 检查加载器不可见
this.page.locator(this.loader).should.not.be.visible;

补充说明 #

chai-playwright插件为Chai扩展了针对Playwright Locator/ElementHandle的断言方法，包括visible、hidden、enabled、disabled等，完全覆盖你需要的元素可见性检查场景。

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