使用Codecept-Puppeteer做E2E测试时，如何获取Shadow Root内文本并验证标题？

我的HTML结构如下：

我需要验证页面标题为Favorite Restaurant，请问如何用Codecept-Puppeteer实现这个测试？

我尝试了以下代码，但没有成功：

Feature('Favorite Restaurant');

Before(({ I }) => {
  I.amOnPage('/#/favorite');
});

Scenario('showing empty favorite restaurants', async ({ I }) => {
  I.wait(3);
  const text = await I.grabTextFrom(
    'pierce/favorite-module .section-header h2',
  );
  console.log(text);
});

测试日志如下：

方法一：用内置方法直接验证标题 #

Codecept-Puppeteer提供了seeTitleEquals方法，可直接验证页面标题，无需手动抓取文本，代码更简洁可靠：

Feature('Favorite Restaurant');

Before(({ I }) => {
  I.amOnPage('/#/favorite');
});

Scenario('验证收藏页面标题', ({ I }) => {
  // 等待标题元素加载完成，超时时间5秒（替代固定等待更灵活）
  I.waitForElement('.section-header h2', 5);
  // 直接验证页面标题是否匹配
  I.seeTitleEquals('Favorite Restaurant');
});

方法二：修复原代码的选择器问题 #

如果坚持用grabTextFrom，需要修正选择器的写法——pierce是Codecept的shadow DOM定位策略，正确格式是pierce/目标选择器，原代码里的选择器写法有误：

Feature('Favorite Restaurant');

Before(({ I }) => {
  I.amOnPage('/#/favorite');
});

Scenario('显示空收藏餐厅列表', async ({ I }) => {
  // 等待元素加载，避免固定等待的不可靠性
  I.waitForElement('pierce/favorite-module .section-header h2', 5);
  // 正确使用pierce定位策略抓取文本
  const text = await I.grabTextFrom('pierce/favorite-module .section-header h2');
  // 断言文本是否匹配
  I.assertEqual(text, 'Favorite Restaurant');
  console.log(text);
});

说明：

• 避免使用I.wait(3)这种固定时长等待，改用waitForElement等待目标元素出现，能适配不同加载速度的场景。
• pierce策略用于穿透shadow DOM访问内部元素，必须按pierce/选择器的格式书写，不能把定位策略和元素标签混写。

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