Cypress 定位Shadow元素

找到并点击在Shadow DoM中的元素:

使用shadow()方法

#shadow-root

使用Shawdow()方法:*先定位到 “#shadow-root”的父级 ,例子中是 class="shadow-host"(在实际中可能为其他值,定位到root的上一级就可以了)

// yields [#shadow-root (open)]
cy.get('.shadow-host').shadow().find('.my-button').click()

 存在shadow嵌套的情况:

#shadow-root
#shadow-root

先定位外层shadow-root, 后逐一向里层定位

// yields [#shadow-root (open)]
cy.get('.shadow-host').shadow().find(#zx).shadow().find('.my-button').click()

使用additional cypress plug-in

如果使用shadow() 依然无法定位的话:可参看链接:https://stackoverflow.com/questions/63763742/accessing-the-shadow-dom-elements-in-cypress (未尝试)

前提条件:

  1. Install: npm install --save-dev cypress-shadow-dom
  2. Save: import 'cypress-shadow-dom'; (in command.js file)
  3. Save: "experimentalShadowDomSupport": true, (in cypress.json file)

取出shadow元素中的value值:

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 

向shadow元素中输入值:

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

 

你可能感兴趣的:(cypress)