在赛普拉斯中访问Shadow DOM元素

Question

Cypress在4.8.0发行版中提供了Shadow DOM支持。但无论如何，我发现很难使用.Shadow()柏树命令来获取Shadow Elements。

相反，我遵循并安装了额外的cypress插件以进行实施，在这里我们可以使用默认的cypress cy.get()命令来获取shadow元素。 参考：https://github.com/abramenal/cypress-shadow-dom#installation

让我们了解如何实现。

先决条件：

1. 安装：npm install --save-dev cypress-shadow-dom
2. 保存：import 'cypress-shadow-dom';（在command.js文件中）
3. 保存："experimentalShadowDomSupport": true，（在cypress.json文件中）

Cypress脚本从Shadow Element中检索“值”： 在这里，我尝试使用父ID css选择器获取Shadow元素并参考其值。并将其存储在变量“文本”中。

cy.get('#id')                             //targeting the parent of Shadow
  .invoke('val')                         //Invoking the value of shadow
  .then((text) => {                   //get the text from shadow element, 
                  cy.log(text)          //so storing the text in variable
                  })                         //this logs the text in the Shadow element 

Cypress脚本将“值”输入到Shadow Element中：

如果您尝试将值输入到shadow元素中：

cy.get('#id')  
  .invoke('val','input text in shadow element')   //invoking shadow element refering its value & the input new value

有关示例的脚本的详细实现： 您可以浏览我的博客： https://sahithigundu.blogspot.com/2020/09/how-to-access-shadow-dom-elements-in.html

希望这会有所帮助。

谢谢， 沙吉特G gsahithi.cse@gmail.com