Cypress处理Shadow DOM：定位Web组件中的隐藏元素

本文旨在解决cypress测试中因元素位于shadow dom内部而无法被定位的问题。通过深入解释shadow dom的特性及其对测试的影响，文章详细介绍了如何利用cypress的`.shadow()`命令来穿透shadow dom，并结合实际代码示例，指导读者准确地定位和操作这些隐藏在web组件中的元素，确保测试的稳定性和可靠性。

在进行前端自动化测试时，Cypress是一个强大且广受欢迎的工具。然而，当网页中包含Shadow DOM（影子DOM）时，传统的Cypress选择器可能会失效，导致元素无法被定位，进而引发测试失败。本文将详细探讨这一问题，并提供Cypress中解决Shadow DOM元素定位的专业方法。

理解Shadow DOM及其对测试的影响

Shadow DOM是Web组件技术的一个关键部分，它允许开发者将一个DOM子树（即“影子DOM”）封装起来，并将其附加到宿主元素（Shadow Host）上。这个影子DOM与主文档的DOM是隔离的，这意味着：

1. 样式隔离：影子DOM内部的样式不会影响外部，外部样式通常也不会影响内部（除非特意穿透）。
2. 脚本隔离：脚本通常需要特殊处理才能访问影子DOM内部的元素。
3. 选择器隔离：标准的DOM查询方法（如document.querySelector）和大部分自动化测试工具的默认选择器，无法直接穿透Shadow DOM来访问其内部元素。

当Cypress尝试使用cy.get('input[name=firstName]')这样的选择器来查找一个位于Shadow DOM内部的元素时，由于其隔离性，Cypress将无法在主文档DOM中找到该元素，最终导致超时错误。

识别页面中的Shadow DOM

在遇到元素无法定位的问题时，首先需要确认目标元素是否位于Shadow DOM中。可以通过浏览器开发者工具进行检查：

1. 打开目标网页，右键点击无法定位的元素，选择“检查”。
2. 在开发者工具的Elements（元素）面板中，观察该元素的父级结构。
3. 如果看到一个元素旁边有一个“#shadow-root (open)”或“#shadow-root (closed)”的标记，则表示该元素位于一个Shadow DOM内部。标记为open表示可以被JavaScript访问，closed则表示无法直接访问（但Cypress的.shadow()通常只处理open的Shadow DOM）。
4. 这个带有#shadow-root标记的元素就是Shadow Host。例如，在问题描述的场景中，array-account-enroll可能就是Shadow Host。

Cypress解决方案：.shadow()命令

Cypress提供了一个专门的命令.shadow()，用于穿透Shadow DOM并访问其内部的元素。这个命令必须紧跟在选择Shadow Host元素的cy.get()之后。

命令语法

cy.get('your-shadow-host-selector') // 选择Shadow Host元素
  .shadow()                        // 进入Shadow DOM
  .find('your-internal-element-selector'); // 在Shadow DOM内部查找元素

• cy.get('your-shadow-host-selector')：首先，你需要精确地选择承载Shadow DOM的宿主元素。这是关键的第一步。
• .shadow()：调用此命令后，Cypress的上下文将切换到Shadow DOM内部。
• .find('your-internal-element-selector')：在进入Shadow DOM后，你可以使用find()命令（而不是再次使用cy.get()）来查找Shadow DOM内部的元素。find()的用法与在常规DOM中类似，但其搜索范围仅限于当前的Shadow DOM。

示例代码与解析

假设我们遇到了与问题描述中类似的情况，需要定位位于Shadow DOM中的firstName输入框。

腾讯混元

腾讯混元大由腾讯研发的大语言模型，具备强大的中文创作能力、逻辑推理能力，以及可靠的任务执行能力。

65

查看详情

原始的、会失败的代码：

describe('Verify identity data', () => {
  it('Makes an assertion', function () {
    cy.visit('https://whitelabel.sandbox.array.io/signup?platform=v3');
    // 假设这个元素在Shadow DOM中，此行会失败
    cy.get('input[name=firstName]'); 
  });
});

修正后的、成功的代码：

describe("Verify identity data", () => {
  it("Makes an assertion", function () {
    cy.visit("https://whitelabel.sandbox.array.io/signup?platform=v3");
    // 1. 定位Shadow Host元素，例如 'array-account-enroll'
    // 2. 使用 .shadow() 进入Shadow DOM
    // 3. 使用 .find() 在Shadow DOM内部查找目标元素
    cy.get("array-account-enroll").shadow().find('input[name="firstName"]');
    // 可以在找到元素后进行进一步操作，例如输入文本
    // .type('John')
    // .should('have.value', 'John');
  });
});

代码解析：

1. cy.get("array-account-enroll")：这里我们首先通过其标签名（或ID、类等）定位到Shadow Host元素。在实际应用中，你需要根据网页的具体结构来确定正确的Shadow Host选择器。
2. .shadow()：这个命令告诉Cypress，接下来的查找操作应该在array-account-enroll元素所承载的Shadow DOM内部进行。
3. .find('input[name="firstName"]')：现在，Cypress在array-account-enroll的Shadow DOM内部查找name属性为firstName的input元素。这样就能成功定位到目标元素了。

注意事项

• Shadow Host的选择器：选择正确的Shadow Host是成功的关键。务必通过开发者工具仔细检查。
• .find() vs cy.get()：一旦进入Shadow DOM，应该使用.find()来查找内部元素，而不是再次使用cy.get()。cy.get()总是从全局document上下文开始查找，而.find()则从当前DOM元素（或Shadow DOM）的上下文开始查找。
• 嵌套Shadow DOM：如果存在多层嵌套的Shadow DOM，你需要连续使用.shadow()命令。例如：cy.get('host-one').shadow().find('host-two').shadow().find('target-element')。
• Cypress版本：确保你的Cypress版本支持.shadow()命令。此命令在较新的Cypress版本中才可用。
• 性能考量：频繁地穿透Shadow DOM可能会略微增加测试执行时间，但在处理Web组件时这是不可避免的。
• 可访问性：虽然.shadow()解决了定位问题，但在设计Web组件时，也应考虑其可访问性，确保辅助技术也能正确识别和操作内部元素。

总结

Shadow DOM是现代Web开发中越来越常见的技术，它为组件化提供了强大的封装能力。对于Cypress自动化测试而言，理解并掌握.shadow()命令是测试包含Web组件页面不可或缺的技能。通过正确识别Shadow Host并运用.shadow().find()链式调用，你可以有效地穿透Shadow DOM，准确地定位和操作内部元素，从而构建出更加健壮和可靠的自动化测试套件。

以上就是Cypress处理Shadow DOM：定位Web组件中的隐藏元素的详细内容，更多请关注php中文网其它相关文章！