---
title: "Shadow DOM in Cypress"
description: "Î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,..."
url: https://blogdeit.ro/shadow-dom-in-cypress
date: 2023-10-03
modified: 2023-10-03
author: "Ioan Solderea"
image: https://blogdeit.ro/wp-content/uploads/2023/10/Zoom_Background_Light_072522.png
categories: ["Testare Software", "Coding", "IT", "Uncategorized", "Youtube"]
tags: ["cypress", "DOM", "Shadow", "Tip"]
type: post
lang: en
---

# 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)

![](https://www.blogdeit.ro/wp-content/uploads/2023/09/2023-09-28_115653.jpg)*https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM/shadowdom.svg*

**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

![](https://www.blogdeit.ro/wp-content/uploads/2023/09/image.png)

**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**.

![](https://www.blogdeit.ro/wp-content/uploads/2023/09/image-1.png)

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("")
.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.

![](https://www.blogdeit.ro/wp-content/uploads/2023/09/image-2.png)

*! 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("", { 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,*

![](https://www.blogdeit.ro/wp-content/uploads/2023/09/image-3.png)

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("")
.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.