Skip to content

Tech Tinker Lab

Journal for tech tinkering experiments

  • Home
  • Basics
    • Coding
  • Game Development
    • Unity
    • Blender
  • Web Development
    • WordPress
    • Shopify
    • Low/No Code
      • Microsoft Power Pages
  • Automation
    • Testing Automation
      • Unit Testing
      • End to End Testing
        • Nightwatch
  • Productivity
    • GSuite
      • GSheets
  • Toggle search form
nightwatch shadow dom

Nightwatch Shadow DOM

Posted on June 21, 2022June 21, 2022 By techtinkerer No Comments on Nightwatch Shadow DOM

Nightwatch Shadow DOM support is here. This has been a long pending item on the Nightwatch roadmap. You can now write tests including shadow DOMs using Nightwatch.

The use case that we will address is around how to do a text assertion within a shadow DOM. Let’s start with understanding of Shadow DOMs. A shadow DOM allows a way to hide DOM elements but still allows it to be attached to the main DOM tree. A developer cannot access a shadow DOM element normally but a browser can render it as if it is any other nested DOM element.

The following demo app contains a page that has shadow DOMs.

Use Case

If you inspect the HTML on the page, you fill find the shadow DOM that we want to validate as shown in the screenshot below.

We will do a text assertion by getting the Shadow DOM root and then finding the slot element within that.

Nightwatch Shadow DOM – Implementation

Nightwatch has documented how to use Shadow DOMs in this API reference page. The .getShadowRoot() api has to be used to get the Shadow Root element. You can then search for the child elements for further interaction.

Let’s see how we can utilize this API to make our text assertion. Here is the test code.

describe('Shadow DOM', function () {
    it('Text assertion on an element in a shadow DOM', async function (browser) {
        await browser
            .navigateTo('http://the-internet.herokuapp.com/shadowdom')
            .waitForElementVisible('body');

        const shadowRootEl = await browser.getShadowRoot('#content > my-paragraph:nth-child(4)');
        const slotElement = await shadowRootEl.find('slot');
        await expect(slotElement.property('innerHTML')).to.equal('My default text');
    });
});

Let us try to break this down step by step

  1. First, we navigate to the page that contains the html having shadow DOMs and wait for the body to be visible.
  2. We then use the selector ‘#content > my-paragraph:nth-child(4)’ to get the shadow root element.
  3. Once we have the shadow root, we search for the required slot element
  4. We write our assertion and run the test

Conclusion

Nightwatch does support Shadow DOM. However, it is not as straightforward as it is in Playwright. While Playwright pierces through the shadow DOM making the child elements directly available as normal selectors, Nightwatch needs a special treatment to handle them.

End to End Testing, Nightwatch, Testing Automation

Post navigation

Previous Post: Basic Authentication Nightwatch
Next Post: Styling with Power Pages

Related Posts

basic auth nightwatch Basic Authentication Nightwatch End to End Testing
test doubles Test Doubles – Dummies, Fakes, Stubs & Spies Testing Automation

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Archives

  • January 2023
  • September 2022
  • June 2022
  • May 2022

Categories

  • Basics
  • Blender
  • Coding
  • End to End Testing
  • Game Development
  • GSheets
  • GSuite
  • Nightwatch
  • No/Low Code
  • Power Pages
  • Productivity
  • Testing Automation
  • Unit Testing
  • Web Development
  • Wordpress
  • How to get Indian Mutual Fund Portfolio in Google Sheets in 2023?
  • Learn Blender from scratch with Imphenzia
  • Power Pages Form
  • Styling with Power Pages
  • Nightwatch Shadow DOM

Copyright © 2023 Tech Tinker Lab.

Powered by PressBook Masonry Blogs