Shadow DOM in Cypress

În acest articol, vom explora cum putem utiliza Cypress pentru a interacționa cu Shadow DOM în aplicațiile web.

Ce este Shadow DOM?

Shadow DOM este o tehnologie importantă în dezvoltarea web, care permite encapsularea elementelor HTML, CSS și JavaScript în interiorul unui container DOM, astfel încât să fie izolate de restul paginii.

Practic exista inca un DOM in umbra altui DOM.

Acest lucru face testarea acestor elemente o provocare, dar cu ajutorul Cypress, putem face acest lucru cu ușurință.

O explicatie mai in detailiu puteti gasi https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM

Instalare Cypress

Pentru a începe să lucrăm cu Cypress și Shadow DOM, trebuie să avem Cypress instalat în proiectul nostru. Dacă nu l-ați instalat deja, puteți face acest lucru cu următoarea comandă:

npm install cypress --save-dev

După ce ați instalat Cypress, puteți crea un proiect Cypress folosind comanda următoare:

npx cypress open

Aceasta va crea o structură de directoare pentru testele dvs. și va deschide interfața grafică Cypress, care vă permite să creați și să rulați teste.

Exemplu de Shadow DOM

Ca si exemplu de site pentru Shadow DOM o sa folosim https://www.lambdatest.com/selenium-playground/shadow-dom.

Scenariul pe care dorim sa il automatizam este sa introducem date in formular si sa facem click pe butonul de Submit

Shadow DOM cu shadow

Pentru a putea interactiona cu Shadow DOM va trebui mai intai sa identificam inceputul ( shadow-root) iar mai apoi sa cautam in Shadow DOM folosind metoda shadow si metoda find.

Codul in Cypress va arata ca si mai jos.

describe("Testare Input din Shadow DOM", () => {
  it("Introduceți text în input din Shadow DOM", () => {
    cy.visit("https://www.lambdatest.com/selenium-playground/shadow-dom");

    // Utilizați .shadow() pentru a accesa Shadow DOM
    cy.get('shadow-signup-form')
      .shadow()
      .find("[name*='username']")
      .type("Text de test")
      .should("have.value", "Text de test");
  });
});

Iar dupa ce rulam testul ar trebui sa vedem ca totul a rulat conform asteptarilor.

! Am pus doar primul pas aici. Puteti adauga cod ca sa introduceti text si in celelalte campuri.

Shadow DOM per comanda

O variante la folosirea shadow este folosirea unui argument in metoda find.

Mai exact codul de mai jos va produce acelasi rezulatat ca si mai sus. Diferentele sunt ca dispare metoda shadow is apare la metoda find { includeShadowDom: true }

describe("Testare Input din Shadow DOM", () => {
  it("Introduceți text în input din Shadow DOM", () => {
    cy.visit("https://www.lambdatest.com/selenium-playground/shadow-dom");

    // Utilizați .shadow() pentru a accesa Shadow DOM
    cy.get('shadow-signup-form')
      .find("[name*='username']",  { includeShadowDom: true })
      .type("Text de test")
      .should("have.value", "Text de test");
  });
});

Shadow DOM prin setari

In cazul in care nu doriti sa folositi nici una dintre cele doua metoda de mai sus mai exista inca o optiune.

Insa inainte de a putea fi utilizata trebuie facuta o modificare in fisieul de configurate cypress.config.js.

Sub sectiune de e2e trebuie introdus includeShadowDom: true,

Cu setarea respectiva codul nostru de Cypress se transforma in urmatoarele

describe("Testare Input din Shadow DOM", () => {
  it("Introduceți text în input din Shadow DOM", () => {
    cy.visit("https://www.lambdatest.com/selenium-playground/shadow-dom");

    // Utilizați .shadow() pentru a accesa Shadow DOM
    cy.get("[name*='username']")
      .type("Text de test")
      .should("have.value", "Text de test");
  });
});

Concluzie

Prin combinarea puterii Cypress cu suportul pentru Shadow DOM, puteți testa cu succes aplicațiile web care utilizează această tehnologie pentru a obține modularitate și izolare în dezvoltare.

Cu testele corecte, puteți asigura că elementele din Shadow DOM se comportă în mod corespunzător și îndeplinesc cerințele dvs. de calitate a software-ului.

Dupa cum spuneam si mai sus exemplul arata doar interactiunea cu un singur element. Incercati cu oricare din cele 3 variante sa faceti testul final, iar in cazul in care aveti intrebari nu exitati sa ne scrieti.