Accessing Shadow DOM inside a Web Component from Cypress

A Custom Element with a input field placed inside a Shadow DOM:


class ShadowInput extends HTMLElement { 

    constructor() { 
        super();
        this.root = this.attachShadow({mode:"open"});
    }

    connectedCallback() { 
        this.root.innerHTML = `
            <input placeholder="something"></input>
        `;
    }
}
customElements.define('shadow-input',ShadowInput);
        
can be tested with cypress.io by accessing the native input field by querying the shadowRoot:

context('the shadow', () => {
    beforeEach(() => {
        cy.visit('localhost:3000');
    })
    
    it('custom text field', () => {
        cy.get('shadow-input').should(e => { 
        const [dom] = e.get();
        dom.shadowRoot.querySelector('input').value = "hey duke";
        });
    });  
    })
      

See it in action and "from scratch":

See you at Web, MicroProfile and Java EE Workshops at Munich Airport, Terminal 2 or Virtual Dedicated Workshops / consulting. Is Munich's airport too far? Learn from home: airhacks.io.


Web Apps, SPA, PWA with vanilla Java Script (ES 6+), CSS 3 and WebStandards only. As simple as possible, but not simpler. See you at: (Progressive) Web apps, Single Page Apps and WebStandards airhacks workshops at MUC airport, Winter Edition

airhacks.fm the podcast:

Stay in touch: airhacks.news.

Comments:

Post a Comment:
  • HTML Syntax: NOT allowed
Online Workshops
realworldpatterns.com
...the last 150 posts
...the last 10 comments
License