Cypress配置Shadow要素

Shadow DoMの要素を見つけてクリックします.
shadow()メソッドの使用

  #shadow-root
    Click me

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
                Click me
        
    
    

先定位外层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 (未試行)
前提条件:

Install:  npm install --save-dev cypress-shadow-dom

Save:  import 'cypress-shadow-dom';  (in command.js file)

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