Playwright如何获取含strong标签的p元素文本并验证？

DOM结构如下：

<p>
<strong>Success!<strong>
"1 item(s) added to cart!"
</p>

需要获取文本「Success!1 item(s) added to cart!」，并验证该元素可见且包含此文本。

尝试使用定位器：

this.successMessage = page.locator('text=Success!1 item(s) added to cart!'); 

执行以下代码时：

public async getSuccessMessageText(): Promise<string | null> {
  return await this.successMessage.textContent();
} 

以及断言代码：

const successMessageText = categoryPage.getSuccessMessageText();
expect(successMessageText).toBe(messagesData.successAddToCartMessage);

测试报错：

Error: expect(received).toBe(expected) // Object.is equality

Expected: "Success!1 item(s) added to cart!"
Received: {}

疑问：是否是strong标签导致textContent()函数出现问题？该如何获取目标文本？

问题根源 #

1. 异步函数未等待：getSuccessMessageText是异步函数，调用时未加await，导致successMessageText拿到的是Promise对象（即报错中的{}），而非实际文本内容。
2. 文本定位器匹配偏差：原DOM中Success!在<strong>标签内，后续文本带双引号，且两个文本节点被标签分隔，直接用text=Success!1 item(s) added to cart!无法精准匹配整个文本内容。

解决步骤 #

1. 修复异步调用问题：调用异步函数时必须加await，确保获取到实际文本：

const successMessageText = await categoryPage.getSuccessMessageText();
expect(successMessageText).toBe(messagesData.successAddToCartMessage);

2. 调整元素定位器：

   • 方法一：定位父元素<p>，textContent()会自动合并所有子节点文本：

     this.successMessage = page.locator('p:has(strong:text("Success!"))');
     

     注意原DOM中的双引号会被包含，若预期文本不带引号，可后续处理去除。

   • 方法二：使用模糊文本匹配，忽略节点分隔：

     // 匹配包含指定两段文本的p元素
     this.successMessage = page.locator('p').filter({ hasText: 'Success!' }).filter({ hasText: '1 item(s) added to cart!' });
     

3. 验证可见性并处理文本：在获取文本前等待元素可见，同时可清理多余格式：

public async getSuccessMessageText(): Promise<string | null> {
  await this.successMessage.waitFor({ state: 'visible' });
  const rawText = await this.successMessage.textContent();
  // 去除双引号并清理空白字符
  return rawText?.replace(/"/g, '').trim();
} 

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