New: Interacting with custom elements during automated test playback
The internet, and Shopify online stores in particular, can be a weird and messy place – especially when you’re trying to programmatically simulate a human interacting with the online store.
On top of that, online stores can use a lot of third party Shopify apps, and these apps often inject code into the merchant's online store – which is why it’s important to monitor the Shopify apps you use with Uptime.
This injected code is often injected as a custom element, and these elements are inherently difficult to interact with – until today.
Today we’ve released a massive update to our Automated Testing Framework to enable the ability to record and interact with these fancy injected elements, called shadow-doms, on your Shopify online store. Read on to learn more.
What is a custom element or shadow-dom?
I think it’s time for an analogy: let's imagine you're building a house, and you want to add some unique features to it.
A custom element is like designing a special type of door or window that isn't standard in every house. You get to define its appearance, behavior, and how it interacts with the rest of the house.
Now, imagine the shadow DOM as a secret room within your house. It's a space where you can place elements and styles that are specific to your custom door or window. This secret room keeps everything related to your custom element separate from the rest of the house, preventing any conflicts or confusion.
So, in simple terms, a custom element is a unique feature you create, and the shadow DOM is like a hidden space where you can control how that feature looks and behaves without affecting the rest of your website or application.
Feel like getting a bit nerdy and learning more – here’s a great article that breaks it down further.
How it works
The best part is that nothing changes for you. You can continue simply recording tests as you normally would, and our Uptime test playback engine will handle the rest on the backend.
For the technically inclined, you’ll see some new selectors within the test JSON file that will point to the custom-element/shadow-dom host, which will enable us to interact with things inside those elements. That will look something like this:
{
"data": [ { "host_id": "fast-simon-serp-app" }, {"target_qs": "div:nth-child(2)"},],
"event": "click",
"url": "https://www.mastermindtoys.com/collections/book-cat-baby-toddler-0-2"
}
What apps and functionality are generally in custom-element/shadow-doms?
Based on what we’ve seen through merchant feedback and recording tests on merchants' stores for the last 2 years, the types of apps using these sorts of elements can vary quite broadly.
However, some of the most common app use cases that leverage these sorts of elements include:
Cart upsell apps
Upsell section blocks
Slide-out carts
Cookie banners
Can I interact with all injected elements?
Unfortunately, not all injected content is created equally – therefore we aren’t able to interact with every type. However, the approach we took will allow us to interact with the vast majority of use cases we’ve seen merchants have.
For example, we won’t be able to interact with iFrame’s due to browser limitations and cross-origin security restrictions.
The good news is that anything that is not an iFrame – ie. a custom element or shadow-dom (the majority of cases) – will be able to be recorded and interacted with using Uptime.
Detect bugs before your customers do
Our mission at Uptime is to give you peace of mind knowing that you’ll be alerted to issues on your online store immediately, even before Shopify or your customers report them.
If your team wants to get some peace of mind, install the app now for free or book time with us and we can help you get started!
