在Cypress中如何断言带Shadow DOM的pds-radio单选框是否处于选中状态

相关单选框元素截图：

对应DOM结构如下：

<pds-radio class data-v-1234bb3c model="singleSelection" checked>
 #shadow-root (open)
 <div class="wrapper">
  <div class="radio-wrapper">
          <div class="radio-container">
                 <div class="radio active" tabindex="0">
                        ::before

选中状态有两个可判断特征：

• <pds-radio>宿主标签存在checked属性
• Shadow DOM内部.radio元素类名包含active，未选中时类名仅为radio

优先选择判断宿主属性的方案，无需处理Shadow DOM穿透逻辑，稳定性更高。不同测试工具的实现方案如下：

1. Cypress #

• 断言宿主checked属性

cy.get('pds-radio[model="singleSelection"]').should('have.attr', 'checked')

• 穿透Shadow DOM断言内部类名

cy.get('pds-radio[model="singleSelection"]').shadow().find('.radio').should('have.class', 'active')

2. Playwright #

• 断言宿主checked属性

await expect(page.locator('pds-radio[model="singleSelection"]')).toHaveAttribute('checked')

• 穿透Shadow DOM断言内部类名（Playwright默认支持Shadow DOM穿透，无需额外配置）

await expect(page.locator('pds-radio[model="singleSelection"] >> .radio')).toHaveClass('radio active')

3. Selenium #

• 断言宿主checked属性

WebElement radioHost = driver.findElement(By.cssSelector("pds-radio[model='singleSelection']"));
assertTrue(radioHost.getAttribute("checked") != null);

• 穿透Shadow DOM断言内部类名

WebElement radioHost = driver.findElement(By.cssSelector("pds-radio[model='singleSelection']"));
SearchContext shadowRoot = radioHost.getShadowRoot();
WebElement innerRadio = shadowRoot.findElement(By.cssSelector(".radio"));
assertTrue(innerRadio.getAttribute("class").contains("active"));

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