Fail
Unable to find an element with the text: Object(2). 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="block svelte-12cmxck"
data-testid="json"
id=""
style="border-style: solid; overflow: visible; min-width: min(0px, 100%); border-width: var(--block-border-width);"
>
<div
class="wrap default full svelte-au1olv hide"
style="position: absolute; padding: 0px;"
/>
<button
aria-label="Copy"
aria-roledescription="Copy value"
class="copy-text svelte-6fc7le"
title="copy"
>
<svg
color="currentColor"
viewBox="0 0 33 33"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"
fill="currentColor"
/>
<path
d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"
fill="currentColor"
/>
</svg>
</button>
<div
class="json-holder svelte-6fc7le"
>
<div
class="json-node svelte-gjojvu root"
>
<div
class="line svelte-gjojvu"
>
<span
class="line-number svelte-gjojvu"
>
1
</span>
<span
class="content svelte-gjojvu"
style="--depth: 0;"
>
<button
class="toggle svelte-gjojvu"
>
▼
</button>
<span
class="punctuation bracket svelte-gjojvu"
>
{
</span>
</span>
</div>
<div
class="children svelte-gjojvu"
>
<div
class="json-node svelte-gjojvu"
>
<div
class="line svelte-gjojvu collapsed"
>
<span
class="line-number svelte-gjojvu"
>
2
</span>
<span
class="content svelte-gjojvu"
style="--depth: 1;"
>
<button
class="toggle svelte-gjojvu"
>
▶
</button>
<span
class="key"
>
"
items
"
</span>
<span
class="punctuation colon"
>
:
</span>
<span
class="punctuation bracket svelte-gjojvu"
>
{
</span>
<button
class="preview svelte-gjojvu"
>
Object(1)
</button>
<span
class="punctuation bracket svelte-gjojvu"
>
}
</span>
</span>
</div>
<div
class="children svelte-gjojvu hidden"
>
<div
class="json-node svelte-gjojvu"
>
<div
class="line svelte-gjojvu"
>
<span
class="line-number svelte-gjojvu"
>
3
</span>
<span
class="content svelte-gjojvu"
style="--depth: 2;"
>
<button
class="toggle svelte-gjojvu"
>
▼
</button>
<span
class="key"
>
"
item
"
</span>
<span
class="punctuation colon"
>
:
</span>
<span
class="punctuation bracket svelte-gjojvu"
>
[
</span>
</span>
</div>
<div
class="children svelte-gjojvu"
>
<div
class="json-node svelte-gjojvu"
>
<div
class="line svelte-gjojvu"
>
<span
class="line-number svelte-gjojvu"
>
4
</span>
<span
class="content svelte-gjojvu"
style="--depth: 3;"
>
<button
class="toggle svelte-gjojvu"
>
▼
</button>
<span
class="key"
>
"
0
"
</span>
<span
class="punctuation colon"
>
:
</span>
<span
class="punctuation bracket svelte-gjojvu"
>
{
</span>
</span>
</div>
<div
class="children svelte-gjojvu"
>
<div
class="json-node svelte-gjojvu"
>
<div
class="line svelte-gjojvu"
>
<span
class="line-number svelte-gjojvu"
>
5
</span>
<span
class="content svelte-gjojvu"
style="--depth: 4;"
>
<span
class="key"
>
"
id
...View in Storybook
Chrome 1211168x90
Linux Linux Ubuntu 20.04.4
0525a4 on json-list
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: Object(2). 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="block svelte-12cmxck"
data-testid="json"
id=""
style="border-style: solid; overflow: visible; min-width: min(0px, 100%); border-width: var(--block-border-width);"
>
<div
class="wrap default full svelte-au1olv hide"
style="position: absolute; padding: 0px;"
/>
<button
aria-label="Copy"
aria-roledescription="Copy value"
class="copy-text svelte-6fc7le"
title="copy"
>
<svg
color="currentColor"
viewBox="0 0 33 33"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"
fill="currentColor"
/>
<path
d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"
fill="currentColor"
/>
</svg>
</button>
<div
class="json-holder svelte-6fc7le"
>
<div
class="json-node svelte-gjojvu root"
>
<div
class="line svelte-gjojvu"
>
<span
class="line-number svelte-gjojvu"
>
1
</span>
<span
class="content svelte-gjojvu"
style="--depth: 0;"
>
<button
class="toggle svelte-gjojvu"
>
▼
</button>
<span
class="punctuation bracket svelte-gjojvu"
>
{
</span>
</span>
</div>
<div
class="children svelte-gjojvu"
>
<div
class="json-node svelte-gjojvu"
>
<div
class="line svelte-gjojvu collapsed"
>
<span
class="line-number svelte-gjojvu"
>
2
</span>
<span
class="content svelte-gjojvu"
style="--depth: 1;"
>
<button
class="toggle svelte-gjojvu"
>
▶
</button>
<span
class="key"
>
"
items
"
</span>
<span
class="punctuation colon"
>
:
</span>
<span
class="punctuation bracket svelte-gjojvu"
>
{
</span>
<button
class="preview svelte-gjojvu"
>
Object(1)
</button>
<span
class="punctuation bracket svelte-gjojvu"
>
}
</span>
</span>
</div>
<div
class="children svelte-gjojvu hidden"
>
<div
class="json-node svelte-gjojvu"
>
<div
class="line svelte-gjojvu"
>
<span
class="line-number svelte-gjojvu"
>
3
</span>
<span
class="content svelte-gjojvu"
style="--depth: 2;"
>
<button
class="toggle svelte-gjojvu"
>
▼
</button>
<span
class="key"
>
"
item
"
</span>
<span
class="punctuation colon"
>
:
</span>
<span
class="punctuation bracket svelte-gjojvu"
>
[
</span>
</span>
</div>
<div
class="children svelte-gjojvu"
>
<div
class="json-node svelte-gjojvu"
>
<div
class="line svelte-gjojvu"
>
<span
class="line-number svelte-gjojvu"
>
4
</span>
<span
class="content svelte-gjojvu"
style="--depth: 3;"
>
<button
class="toggle svelte-gjojvu"
>
▼
</button>
<span
class="key"
>
"
0
"
</span>
<span
class="punctuation colon"
>
:
</span>
<span
class="punctuation bracket svelte-gjojvu"
>
{
</span>
</span>
</div>
<div
class="children svelte-gjojvu"
>
<div
class="json-node svelte-gjojvu"
>
<div
class="line svelte-gjojvu"
>
<span
class="line-number svelte-gjojvu"
>
5
</span>
<span
class="content svelte-gjojvu"
style="--depth: 4;"
>
<span
class="key"
>
"
id
...
at Object.getElementError (https://649585a46a67480e3074dc75-xhbrlzmdke.capture-loopback.chromatic.com/assets/index-C5Sj9x3H.js:117:284)
at https://649585a46a67480e3074dc75-xhbrlzmdke.capture-loopback.chromatic.com/assets/index-C5Sj9x3H.js:139:164
at https://649585a46a67480e3074dc75-xhbrlzmdke.capture-loopback.chromatic.com/assets/index-C5Sj9x3H.js:131:4163
at https://649585a46a67480e3074dc75-xhbrlzmdke.capture-loopback.chromatic.com/assets/index-C5Sj9x3H.js:139:387
at ln.invoke (https://649585a46a67480e3074dc75-xhbrlzmdke.capture-loopback.chromatic.com/assets/index-Bqoxw6Vv.js:27:9266)
at ln.track (https://649585a46a67480e3074dc75-xhbrlzmdke.capture-loopback.chromatic.com/assets/index-Bqoxw6Vv.js:27:6505)
at Object.getByText (https://649585a46a67480e3074dc75-xhbrlzmdke.capture-loopback.chromatic.com/assets/index-Bqoxw6Vv.js:27:5777)
at https://649585a46a67480e3074dc75-xhbrlzmdke.capture-loopback.chromatic.com/assets/JSON.stories-Bx07aWli.js:1:2159
at async https://649585a46a67480e3074dc75-xhbrlzmdke.capture-loopback.chromatic.com/sb-preview/runtime.js:144:3897
at async StoryRender.runPhase (https://649585a46a67480e3074dc75-xhbrlzmdke.capture-loopback.chromatic.com/sb-preview/runtime.js:144:937)