Css 访问Cypress中的阴影DOM元素

Cypress在4.8.0发行版中提供了支持。然而不知何故，我发现使用

.Shadow（）

cypress命令很难获取Shadow元素

相反，我遵循并安装了用于实现的附加cypress插件，在该插件中，我们可以使用默认的cypress

cy.get（）

命令获取shadow元素。 参考：

让我们了解如何实施

先决条件：

安装：

npm安装--保存dev-cypress shadow-dom

保存：

导入“cypress shadow dom”（在command.js文件中）

保存：

“experimentalShadowDomSupport”：true

，（在cypress.json文件中）

从阴影元素检索“值”的Cypress脚本： 在这里，我试图获取Shadow元素，父id css选择器引用它的值。并将其存储在变量“text”中

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脚本将“值”输入阴影元素：

如果试图将值输入阴影元素：

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

关于脚本的详细实现和示例： 你可以浏览我的博客：

希望这有帮助

谢谢， 沙希提G 格萨希提。cse@gmail.com