The baseline is shorter than the new snapshot (1168x3845 to 1168x4948).
Fail
Unable to find an element with the text: onClick. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
Ignored nodes: comments, script, style
<div
id="storybook-root"
>
<div
class=" sbdocs sbdocs-preview css-5mcaeq"
>
<div
class="docs-story css-kdwx3d"
>
<div
class="css-61hvdk"
>
<div
class="css-10skpf4"
height="0"
scale="1"
>
<div
class="innerZoomElementWrapper"
>
<div>
<div
class="sb-story"
id="story--storybook-blocks-example-button--secondary"
>
<div
data-name="Secondary"
>
<div
class="css-1jx8ju5"
data-side="left"
>
<button
class="css-1ndqz1z"
type="button"
>
Button
</button>
</div>
<div
class="css-yp14tk"
data-side="right"
>
<button
class="css-1ndqz1z"
type="button"
>
Button
</button>
</div>
</div>
</div>
</div>
<div>
<div
class="sb-story"
id="story--storybook-blocks-example-button--secondary"
>
<div
data-name="Secondary"
>
<div
class="css-1jx8ju5"
data-side="left"
>
<button
class="css-1ndqz1z"
type="button"
>
Button
</button>
</div>
<div
class="css-yp14tk"
data-side="right"
>
<button
class="css-1ndqz1z"
type="button"
>
Button
</button>
</div>
</div>
</div>
</div>
<div>
<div
class="sb-story"
id="story--storybook-blocks-example-button--secondary"
>
<div
data-name="Secondary"
>
<div
class="css-1jx8ju5"
data-side="left"
>
<button
class="css-1ndqz1z"
type="button"
>
Button
</button>
</div>
<div
class="css-yp14tk"
data-side="right"
>
<button
class="css-1ndqz1z"
type="button"
>
Button
</button>
</div>
</div>
</div>
</div>
<div>
<div
class="sb-story"
id="story--storybook-blocks-example-button--large"
>
<div
data-name="Large"
>
<div
class="css-1jx8ju5"
data-side="left"
>
<button
class="css-1jnxf7a"
type="button"
>
Button
</button>
</div>
<div
class="css-yp14tk"
data-side="right"
>
<button
class="css-1jnxf7a"
type="button"
>
Button
</button>
</div>
</div>
</div>
</div>
<div>
<div
class="sb-story"
id="story--storybook-blocks-example-button--large"
>
<div
data-name="Large"
>
<div
class="css-1jx8ju5"
data-side="left"
>
<button
class="css-1jnxf7a"
type="button"
>
Button
</button>
</div>
<div
class="css-yp14tk"
data-side="right"
>
<button
class="css-1jnxf7a"
type="button"
>
Button
</button>
</div>
</div>
</div>
</div>
<div>
<div
class="sb-story"
id="story--storybook-blocks-example-button--large"
>
<div
data-name="Large"
>
<div
class="css-1jx8ju5"
data-side="left"
>
<button
class="css-1jnxf7a"
type="button"
>
Button
</button>
</div>
<div
class="css-yp14tk"
data-side="right"
>
<button
class="css-1jnxf7a"
type="button"
>
Button
</button>
</div>
</div>
</div>
</div>
<div>
<div
class="sb-story"
id="story--storybook-blocks-example-button--primary"
>
<div
data-name="Primary"
>
<div
class="css-1jx8ju5"
data-side="left"
>
<button
class="css-6yho88"
type="button"
>
Button
</button>
</div>
<div
class="css-yp14tk"
data-side="right"
>
<button
class="css-6yho88"
type="button"
>
Button
</button>
</div>
...
Ignored nodes: comments, script, style
<div
id="storybook-root"
>
<div
class=" sbdocs sbdocs-preview css-5mcaeq"
>
<div
class="docs-story css-kdwx3d"
>
<div
class="css-61hvdk"
>
<div
class="css-10skpf4"
height="0"
scale="1"
>
<div
class="innerZoomElementWrapper"
>
<div>
<div
class="sb-story"
id="story--storybook-blocks-example-button--secondary"
>
<div
data-name="Secondary"
>
<div
class="css-1jx8ju5"
data-side="left"
>
<button
class="css-1ndqz1z"
type="button"
>
Button
</button>
</div>
<div
class="css-yp14tk"
data-side="right"
>
<button
class="css-1ndqz1z"
type="button"
>
Button
</button>
</div>
</div>
</div>
</div>
<div>
<div
class="sb-story"
id="story--storybook-blocks-example-button--secondary"
>
<div
data-name="Secondary"
>
<div
class="css-1jx8ju5"
data-side="left"
>
<button
class="css-1ndqz1z"
type="button"
>
Button
</button>
</div>
<div
class="css-yp14tk"
data-side="right"
>
<button
class="css-1ndqz1z"
type="button"
>
Button
</button>
</div>
</div>
</div>
</div>
<div>
<div
class="sb-story"
id="story--storybook-blocks-example-button--secondary"
>
<div
data-name="Secondary"
>
<div
class="css-1jx8ju5"
data-side="left"
>
<button
class="css-1ndqz1z"
type="button"
>
Button
</button>
</div>
<div
class="css-yp14tk"
data-side="right"
>
<button
class="css-1ndqz1z"
type="button"
>
Button
</button>
</div>
</div>
</div>
</div>
<div>
<div
class="sb-story"
id="story--storybook-blocks-example-button--large"
>
<div
data-name="Large"
>
<div
class="css-1jx8ju5"
data-side="left"
>
<button
class="css-1jnxf7a"
type="button"
>
Button
</button>
</div>
<div
class="css-yp14tk"
data-side="right"
>
<button
class="css-1jnxf7a"
type="button"
>
Button
</button>
</div>
</div>
</div>
</div>
<div>
<div
class="sb-story"
id="story--storybook-blocks-example-button--large"
>
<div
data-name="Large"
>
<div
class="css-1jx8ju5"
data-side="left"
>
<button
class="css-1jnxf7a"
type="button"
>
Button
</button>
</div>
<div
class="css-yp14tk"
data-side="right"
>
<button
class="css-1jnxf7a"
type="button"
>
Button
</button>
</div>
</div>
</div>
</div>
<div>
<div
class="sb-story"
id="story--storybook-blocks-example-button--large"
>
<div
data-name="Large"
>
<div
class="css-1jx8ju5"
data-side="left"
>
<button
class="css-1jnxf7a"
type="button"
>
Button
</button>
</div>
<div
class="css-yp14tk"
data-side="right"
>
<button
class="css-1jnxf7a"
type="button"
>
Button
</button>
</div>
</div>
</div>
</div>
<div>
<div
class="sb-story"
id="story--storybook-blocks-example-button--primary"
>
<div
data-name="Primary"
>
<div
class="css-1jx8ju5"
data-side="left"
>
<button
class="css-6yho88"
type="button"
>
Button
</button>
</div>
<div
class="css-yp14tk"
data-side="right"
>
<button
class="css-6yho88"
type="button"
>
Button
</button>
</div>
...View in Storybook
Chrome 891168x4948
Linux Amazon Linux 2
ce5ab4 on tom/sb-1144-update-api-of-story-block
Caught exception in
play functionThis story threw an error after it finished rendering which means interactions may not have been executed fully.
TestingLibraryElementError: Unable to find an element with the text: onClick. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
Ignored nodes: comments, script, style
<div
id="storybook-root"
>
<div
class=" sbdocs sbdocs-preview css-5mcaeq"
>
<div
class="docs-story css-kdwx3d"
>
<div
class="css-61hvdk"
>
<div
class="css-10skpf4"
height="0"
scale="1"
>
<div
class="innerZoomElementWrapper"
>
<div>
<div
class="sb-story"
id="story--storybook-blocks-example-button--secondary"
>
<div
data-name="Secondary"
>
<div
class="css-1jx8ju5"
data-side="left"
>
<button
class="css-1ndqz1z"
type="button"
>
Button
</button>
</div>
<div
class="css-yp14tk"
data-side="right"
>
<button
class="css-1ndqz1z"
type="button"
>
Button
</button>
</div>
</div>
</div>
</div>
<div>
<div
class="sb-story"
id="story--storybook-blocks-example-button--secondary"
>
<div
data-name="Secondary"
>
<div
class="css-1jx8ju5"
data-side="left"
>
<button
class="css-1ndqz1z"
type="button"
>
Button
</button>
</div>
<div
class="css-yp14tk"
data-side="right"
>
<button
class="css-1ndqz1z"
type="button"
>
Button
</button>
</div>
</div>
</div>
</div>
<div>
<div
class="sb-story"
id="story--storybook-blocks-example-button--secondary"
>
<div
data-name="Secondary"
>
<div
class="css-1jx8ju5"
data-side="left"
>
<button
class="css-1ndqz1z"
type="button"
>
Button
</button>
</div>
<div
class="css-yp14tk"
data-side="right"
>
<button
class="css-1ndqz1z"
type="button"
>
Button
</button>
</div>
</div>
</div>
</div>
<div>
<div
class="sb-story"
id="story--storybook-blocks-example-button--large"
>
<div
data-name="Large"
>
<div
class="css-1jx8ju5"
data-side="left"
>
<button
class="css-1jnxf7a"
type="button"
>
Button
</button>
</div>
<div
class="css-yp14tk"
data-side="right"
>
<button
class="css-1jnxf7a"
type="button"
>
Button
</button>
</div>
</div>
</div>
</div>
<div>
<div
class="sb-story"
id="story--storybook-blocks-example-button--large"
>
<div
data-name="Large"
>
<div
class="css-1jx8ju5"
data-side="left"
>
<button
class="css-1jnxf7a"
type="button"
>
Button
</button>
</div>
<div
class="css-yp14tk"
data-side="right"
>
<button
class="css-1jnxf7a"
type="button"
>
Button
</button>
</div>
</div>
</div>
</div>
<div>
<div
class="sb-story"
id="story--storybook-blocks-example-button--large"
>
<div
data-name="Large"
>
<div
class="css-1jx8ju5"
data-side="left"
>
<button
class="css-1jnxf7a"
type="button"
>
Button
</button>
</div>
<div
class="css-yp14tk"
data-side="right"
>
<button
class="css-1jnxf7a"
type="button"
>
Button
</button>
</div>
</div>
</div>
</div>
<div>
<div
class="sb-story"
id="story--storybook-blocks-example-button--primary"
>
<div
data-name="Primary"
>
<div
class="css-1jx8ju5"
data-side="left"
>
<button
class="css-6yho88"
type="button"
>
Button
</button>
</div>
<div
class="css-yp14tk"
data-side="right"
>
<button
class="css-6yho88"
type="button"
>
Button
</button>
</div>
...
Ignored nodes: comments, script, style
<div
id="storybook-root"
>
<div
class=" sbdocs sbdocs-preview css-5mcaeq"
>
<div
class="docs-story css-kdwx3d"
>
<div
class="css-61hvdk"
>
<div
class="css-10skpf4"
height="0"
scale="1"
>
<div
class="innerZoomElementWrapper"
>
<div>
<div
class="sb-story"
id="story--storybook-blocks-example-button--secondary"
>
<div
data-name="Secondary"
>
<div
class="css-1jx8ju5"
data-side="left"
>
<button
class="css-1ndqz1z"
type="button"
>
Button
</button>
</div>
<div
class="css-yp14tk"
data-side="right"
>
<button
class="css-1ndqz1z"
type="button"
>
Button
</button>
</div>
</div>
</div>
</div>
<div>
<div
class="sb-story"
id="story--storybook-blocks-example-button--secondary"
>
<div
data-name="Secondary"
>
<div
class="css-1jx8ju5"
data-side="left"
>
<button
class="css-1ndqz1z"
type="button"
>
Button
</button>
</div>
<div
class="css-yp14tk"
data-side="right"
>
<button
class="css-1ndqz1z"
type="button"
>
Button
</button>
</div>
</div>
</div>
</div>
<div>
<div
class="sb-story"
id="story--storybook-blocks-example-button--secondary"
>
<div
data-name="Secondary"
>
<div
class="css-1jx8ju5"
data-side="left"
>
<button
class="css-1ndqz1z"
type="button"
>
Button
</button>
</div>
<div
class="css-yp14tk"
data-side="right"
>
<button
class="css-1ndqz1z"
type="button"
>
Button
</button>
</div>
</div>
</div>
</div>
<div>
<div
class="sb-story"
id="story--storybook-blocks-example-button--large"
>
<div
data-name="Large"
>
<div
class="css-1jx8ju5"
data-side="left"
>
<button
class="css-1jnxf7a"
type="button"
>
Button
</button>
</div>
<div
class="css-yp14tk"
data-side="right"
>
<button
class="css-1jnxf7a"
type="button"
>
Button
</button>
</div>
</div>
</div>
</div>
<div>
<div
class="sb-story"
id="story--storybook-blocks-example-button--large"
>
<div
data-name="Large"
>
<div
class="css-1jx8ju5"
data-side="left"
>
<button
class="css-1jnxf7a"
type="button"
>
Button
</button>
</div>
<div
class="css-yp14tk"
data-side="right"
>
<button
class="css-1jnxf7a"
type="button"
>
Button
</button>
</div>
</div>
</div>
</div>
<div>
<div
class="sb-story"
id="story--storybook-blocks-example-button--large"
>
<div
data-name="Large"
>
<div
class="css-1jx8ju5"
data-side="left"
>
<button
class="css-1jnxf7a"
type="button"
>
Button
</button>
</div>
<div
class="css-yp14tk"
data-side="right"
>
<button
class="css-1jnxf7a"
type="button"
>
Button
</button>
</div>
</div>
</div>
</div>
<div>
<div
class="sb-story"
id="story--storybook-blocks-example-button--primary"
>
<div
data-name="Primary"
>
<div
class="css-1jx8ju5"
data-side="left"
>
<button
class="css-6yho88"
type="button"
>
Button
</button>
</div>
<div
class="css-yp14tk"
data-side="right"
>
<button
class="css-6yho88"
type="button"
>
Button
</button>
</div>
...