Mats Bryntse
9 June 2020

Announcing Siesta v5.5.0 With Web Component + Touch Event Support

We are super excited to announce Siesta v5.5.0. The release includes new features, new demos as well as a few […]

We are super excited to announce Siesta v5.5.0. The release includes new features, new demos as well as a few bug fixes and polishing. Let’s look under the hood to find out what’s new.

Support For Testing Web Components

Web components are now a regular part of modern web development. They provide encapsulation, giving the component author a private context for HTML, JS and CSS. The shadow DOM context also helps against style collisions with other parts of the main page. Since the shadow DOM is an isolated private context, global DOM APIs such as `querySelector` or `elementFromPoint` will not return results from the nested context (which is the whole point of the encapsulation).

This becomes a bit of a challenge for an automated UI testing tool that wants to allow its users to target elements inside such encapsulated contexts. In Siesta 5.5, the targeting selector API now allows you to penetrate through the layers of private contexts, meaning you can target an element inside a web component inside a web component inside a web component…

Here’s an example (from the Siesta internal test suite) showing 4 levels of nesting:

t.it('Should support nested web components', async t => {
    const app  = document.createElement('todo-app');
    const app2 = document.createElement('todo-app');
    const app3 = document.createElement('todo-app');
    const app4 = document.createElement('todo-app');

    document.body.appendChild(app);
    app.shadowRoot.appendChild(app2);
    app2.shadowRoot.appendChild(app3);
    app3.shadowRoot.appendChild(app4);

    await t.click('todo-app -> button');
    await t.click('todo-app -> todo-app -> button');
    await t.click('todo-app -> todo-app -> todo-app -> button');
    await t.click('todo-app -> todo-app -> todo-app -> todo-app ->button');
});

The special `->` separator allows you to reach inside nested contexts of both web components and iframes.

Touch Event Simulation

In Siesta 5.5, we also improved our touch event simulation to match the native browser behavior. This is not a trivial task, as browsers fire long sequences of events even for a simple tap gesture. Chrome with touch events enabled fires the following sequence (omitting focus events and assuming no calls to `preventDefault`):

'pointerover',
'pointerenter',
'pointerdown',
'touchstart',
'pointerup',
'pointerout',
'pointerleave',
'touchend',
'mouseover',
'mouseenter', // Fired on first page touchstart only
'mousemove',
'mousedown',
'mouseup',
'click'

This varies a bit between browsers but generally they use the same pattern. Siesta will now correctly simulate these events when calling APIs like `tap`, `doubleTap` and `longPress`. To run touch tests, you need to use a touch capable browser / device. We found Chrome to be great for running touch tests.

New Examples

We also added two new demos (one Angular + one Polymer) to the example sandbox. They are meant to show you how easy it is to write stable UI tests with Siesta. Below you see the new Angular dashboard test running in slow mode.

Angular dashboard test

New Project Configs

When a test fails it is sometimes useful to stop test execution to be able to jump into debugging. To facilitate this, we added two new test/project configs: `breakTestOnFail` and `breakSubTestOnFail`. `breakTestOnFail` stops the top-level test, whereas `breakSubTestOnFail` just stops a subtest. We would like to thank our community for suggesting this useful feature.

Summing up

For full details on what changed please see the change log. We hope you will find the new features useful and if there is a feature you need, please let us know. Happy testing!

Download Free Trial

Mats Bryntse

Siesta Testing