Puppetry
3.2.2
3.2.22.0.0
3.2.2
3.2.22.0.0
  • Welcome Puppetry
  • Getting Started
  • Project
  • Suite
  • Group
  • Target
    • Simple Target
    • iFrame Target
    • ShadowDOM Target
    • Chained Target
    • Shared Target
  • Test Case
  • Test Step / Action
    • Page Commands
    • Page Assertions
    • Target Commands
    • Target Assertions
  • Managing Records
  • Snippets
  • Running tests
    • Interactive Mode
    • Troubleshooting
  • Test Report
  • Export
    • Exporting as Jest Project (CI-friendly)
    • Exporting as Test Specification
  • Settings
  • Template Expressions
  • Testing Techniques
    • Testing Dynamic Content
    • Exhaustive Testing
    • Performance Testing
    • Visual Regression Testing
    • Testing Shadow DOM
    • Testing Google Analytics tracking code
    • Testing Chrome Extensions
    • Testing REST API
    • Mocking HTTP/S Requests
    • Testing Transactional Emails
      • Example with Restmail.net
      • Example with Mailinator
      • Example with IMAP bridge
      • Example with Google API
    • Testing Forms with Captcha
  • Version Control
  • Tips and Tricks
    • Embrace the Power of CSS
  • Command API
  • Test Application
Powered by GitBook
On this page

Was this helpful?

  1. Target

ShadowDOM Target

PreviousiFrame TargetNextChained Target

Last updated 5 years ago

Was this helpful?

Imagine we have a web component <foo-component id="fooShadowRoot"> and need to query a sub-element within its Shadow DOM. So we create a target for the foo-component:

Then we create a target for the hosted element

The first one is a simple target like we are used to have in Puppetry, but the second is chained one. While building it we expand Options, set Parent target to SHADOW_FOO and Parent type to shadow host.

As soon as the hosted element target defined (SHADOWDOM_FOO_LOCAL) we can address it as any simple target:

Defining shadow root target
Defining hosted element target
Chained target
Addressing a chained target