Create A New Angular Project

Use the Angular CLI tool to create an Angular project. Execute the following command to create the project.

• ng new signaturePadProject
• Would you like to add Angular routing? Yes
• Which stylesheet format would you like to use? CSS

What Is a SignaturePad?

SignaturePad is used to sign a document digitally using a stylus or mouse cursor pointer. At the end of the document, there will be a box that allows the user to sign the document on a web application. After saving the document, the signature gets stored in a base64-type image.

A shadow DOM element is one that has been programmatically added to an element with the use of JavaScript and whose content does not show up in the browser’s DOM. Automating Selenium tests on your website can save you time and money by ensuring the changes you make are not breaking anything or negatively impacting your user experience. There are multiple ways to do this, but in this guide, we will be going over how to automate shadow DOM elements using Selenium WebDriver.

Locate the Host Element

The first step is to locate the host element. The host element is the element that contains the shadow tree. It can be any type of element, such as a div, section, or span. Once you have found the host element, you need to use the findElement command to find the shadow root. In order to perform an action on the shadow root, we need to use the executeScript command. To perform an action on one specific node in the tree (e.g., all button nodes), we must find and identify it within our script (e.g., button).