chromeThe baseline is taller than the new snapshot (1200x936 to 1200x900).
edgeThe baseline is taller than the new snapshot (1200x936 to 1200x900).
firefoxThe baseline is taller than the new snapshot (1200x936 to 1200x900).
Fail
Found multiple elements with the text: SubcomponentA
Here are the matching elements:
Ignored nodes: comments, script, style
<button
class="tabbutton css-xq6kj3"
id="tabbutton-prop-table-div-subcomponenta"
role="tab"
type="button"
>
SubcomponentA
</button>
Ignored nodes: comments, script, style
<button
class="tabbutton css-xq6kj3"
id="tabbutton-prop-table-div-subcomponenta"
role="tab"
type="button"
>
SubcomponentA
</button>
(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).
Ignored nodes: comments, script, style
<div
id="storybook-root"
>
<div
class="css-ec0dpa"
data-side="left"
>
<div
class="sbdocs sbdocs-wrapper css-k7lbue"
>
<div
class="sbdocs sbdocs-content css-qa4clq"
>
<div
class="css-13o7eu2"
>
<div
class="sb-bar undefined css-1i892q"
>
<div
class="css-p1dfi6"
>
<div
class="css-4ii5m"
>
<div
class="css-vg9inr"
role="tablist"
style="white-space: normal;"
>
<button
class="tabbutton tabbutton-active css-abbmds"
id="tabbutton-prop-table-div-controlsparameters"
role="tab"
type="button"
>
ControlsParameters
</button>
<button
class="tabbutton css-xq6kj3"
id="tabbutton-prop-table-div-subcomponenta"
role="tab"
type="button"
>
SubcomponentA
</button>
<button
class="tabbutton css-xq6kj3"
id="tabbutton-prop-table-div-subcomponentb"
role="tab"
type="button"
>
SubcomponentB
</button>
<div
class="css-c3junj"
>
<button
aria-hidden="true"
class="tabbutton css-1yaygvy"
role="tab"
style="visibility: hidden;"
type="button"
>
Tabs
<span
class="addon-collapsible-icon css-rlrctb"
/>
</button>
</div>
</div>
</div>
</div>
</div>
<div
class="css-s2td8l"
id="panel-tab-content"
>
<div
class="css-14m39zm"
>
<table
class="docblock-argstable sb-unstyled css-v2ifgj"
>
<thead
class="docblock-argstable-head"
>
<tr>
<th>
<span>
Name
</span>
</th>
<th>
<span>
Description
</span>
</th>
<th>
<span>
Default
</span>
</th>
<th>
<span
class="css-gg4vpm"
>
Control
<button
class="css-1cu29rp"
title="Reset controls"
>
<svg
aria-hidden="true"
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.146 3.854a.5.5 0 010-.708l2-2a.5.5 0 11.708.708L2.707 3h6.295A4 4 0 019 11H3a.5.5 0 010-1h6a3 3 0 100-6H2.707l1.147 1.146a.5.5 0 11-.708.708l-2-2z"
fill="currentColor"
/>
</svg>
</button>
</span>
</th>
</tr>
</thead>
<tbody
class="docblock-argstable-body"
>
<tr>
<td
class="css-4lbn0a"
>
<span
class="css-in3yi3"
>
a
</span>
</td>
<td>
<div
class="css-1f9domv"
>
<div
class="css-13nzt7e"
>
<span
class="css-o1d7ko"
>
string
</span>
</div>
</div>
</td>
<td>
<div
class="css-13nzt7e"
>
<span
class="css-o1d7ko"
>
'a'
</span>
</div>
</td>
<td>
<button
class="css-10lkeuu"
id="set-a"
>
Set string
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="css-b8mu1s"
data-side="right"
>
<div
class="sbdocs sbdocs-wrapper css-1s5i75q"
>
<div
class="sbdocs sbdocs-content css-q22hxw"
>
<div
class="css-13o7eu2"
>
<div
class="sb-bar undefined css-1nhlm6u"
>
<div
class="css-p1dfi6"
>
<div
class="css-4ii5m"
>
<div
class="css-vg9inr"
role="tablist"
style="white-space: normal;"
>
<button
class="tabbutton tabbutton-active css-abbmds"
id="tabbutton-prop-table-div-controlsparameters"
role="tab"
type="button"
>
ControlsParameters
</button>
<button
class="tabbutton css-xq6kj3"
id="tabbutton-prop-table-div-subcomponenta"
role="tab"
type="button"
>
SubcomponentA
</button>
<button
class="tabbutton css-xq6kj3"
id="tabbutton-prop-table-div-subcomponentb"
role="tab"
type="button"
>
SubcomponentB
</button>
<div
class="css-c3junj"
>
<button
aria-hidden="true"
class="tabbutton css-1yaygvy"
role="tab"
style="visibility: hidden;"
type="button"
>
Tabs
<span
class="addon-collapsible-icon css-rlrctb"
/>
</button>
</div>
</div>
</div>
</div>
</div>
<div
class="css-12lobhp"
id="panel-tab-content"
>
<div
class="css-14m39zm"
>
<table
class="docblock-argstable sb-unstyled css-1mknmpt"
>
<thead
class="docblock-argstable-head"
>
<tr>
<th>
<span>
Name
</span>
</th>
<th>
<span>
Description
</span>
</th>
<th>
<span>
Default
</span>
</th>
<th>
<span
class="css-gg4vpm"
>
Control
<button
class="css-1cu29rp"
title="Reset controls"
>
<svg
aria-hidden="true"
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.146 3.854a.5.5 0 010-.708l2-2a.5.5 0 11.708.708L2.707 3h6.295A4 4 0 019 11H3a.5.5 0 010-1h6a3 3 0 100-6H2.707l1.147 1.146a.5.5 0 11-.708.708l-2-2z"
fill="currentColor"
/>
</svg>
</button>
</span>
</th>
</tr>
</thead>
<tbody
class="docblock-argstable-body"
>
<tr>
<td
class="css-4lbn0a"
>
<span
class="css-in3yi3"
>
a
</span>
</td>
<td>
<div
class="css-1rqkmqf"
>
<div
class="css-13nzt7e"
>
<span
class="css-mkjjps"
>
string
</span>
</div>
</div>
</td>
<td>
<div
class="css-13nzt7e"
>
<span
class="css-mkjjps"
>
'a'
</span>
</div>
</td>
<td>
<button
class="css-1vdzwl0"
id="set-a"
>
Set string
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Ignored nodes: comments, script, style
<div
id="storybook-root"
>
<div
class="css-ec0dpa"
data-side="left"
>
<div
class="sbdocs sbdocs-wrapper css-k7lbue"
>
<div
class="sbdocs sbdocs-content css-qa4clq"
>
<div
class="css-13o7eu2"
>
<div
class="sb-bar undefined css-1i892q"
>
<div
class="css-p1dfi6"
>
<div
class="css-4ii5m"
>
<div
class="css-vg9inr"
role="tablist"
style="white-space: normal;"
>
<button
class="tabbutton tabbutton-active css-abbmds"
id="tabbutton-prop-table-div-controlsparameters"
role="tab"
type="button"
>
ControlsParameters
</button>
<button
class="tabbutton css-xq6kj3"
id="tabbutton-prop-table-div-subcomponenta"
role="tab"
type="button"
>
SubcomponentA
</button>
<button
class="tabbutton css-xq6kj3"
id="tabbutton-prop-table-div-subcomponentb"
role="tab"
type="button"
>
SubcomponentB
</button>
<div
class="css-c3junj"
>
<button
aria-hidden="true"
class="tabbutton css-1yaygvy"
role="tab"
style="visibility: hidden;"
type="button"
>
Tabs
<span
class="addon-collapsible-icon css-rlrctb"
/>
</button>
</div>
</div>
</div>
</div>
</div>
<div
class="css-s2td8l"
id="panel-tab-content"
>
<div
class="css-14m39zm"
>
<table
class="docblock-argstable sb-unstyled css-v2ifgj"
>
<thead
class="docblock-argstable-head"
>
<tr>
<th>
<span>
Name
</span>
</th>
<th>
<span>
Description
</span>
</th>
<th>
<span>
Default
</span>
</th>
<th>
<span
class="css-gg4vpm"
>
Control
<button
class="css-1cu29rp"
title="Reset controls"
>
<svg
aria-hidden="true"
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.146 3.854a.5.5 0 010-.708l2-2a.5.5 0 11.708.708L2.707 3h6.295A4 4 0 019 11H3a.5.5 0 010-1h6a3 3 0 100-6H2.707l1.147 1.146a.5.5 0 11-.708.708l-2-2z"
fill="currentColor"
/>
</svg>
</button>
</span>
</th>
</tr>
</thead>
<tbody
class="docblock-argstable-body"
>
<tr>
<td
class="css-4lbn0a"
>
<span
class="css-in3yi3"
>
a
</span>
</td>
<td>
<div
class="css-1f9domv"
>
<div
class="css-13nzt7e"
>
<span
class="css-o1d7ko"
>
string
</span>
</div>
</div>
</td>
<td>
<div
class="css-13nzt7e"
>
<span
class="css-o1d7ko"
>
'a'
</span>
</div>
</td>
<td>
<button
class="css-10lkeuu"
id="set-a"
>
Set string
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="css-b8mu1s"
data-side="right"
>
<div
class="sbdocs sbdocs-wrapper css-1s5i75q"
>
<div
class="sbdocs sbdocs-content css-q22hxw"
>
<div
class="css-13o7eu2"
>
<div
class="sb-bar undefined css-1nhlm6u"
>
<div
class="css-p1dfi6"
>
<div
class="css-4ii5m"
>
<div
class="css-vg9inr"
role="tablist"
style="white-space: normal;"
>
<button
class="tabbutton tabbutton-active css-abbmds"
id="tabbutton-prop-table-div-controlsparameters"
role="tab"
type="button"
>
ControlsParameters
</button>
<button
class="tabbutton css-xq6kj3"
id="tabbutton-prop-table-div-subcomponenta"
role="tab"
type="button"
>
SubcomponentA
</button>
<button
class="tabbutton css-xq6kj3"
id="tabbutton-prop-table-div-subcomponentb"
role="tab"
type="button"
>
SubcomponentB
</button>
<div
class="css-c3junj"
>
<button
aria-hidden="true"
class="tabbutton css-1yaygvy"
role="tab"
style="visibility: hidden;"
type="button"
>
Tabs
<span
class="addon-collapsible-icon css-rlrctb"
/>
</button>
</div>
</div>
</div>
</div>
</div>
<div
class="css-12lobhp"
id="panel-tab-content"
>
<div
class="css-14m39zm"
>
<table
class="docblock-argstable sb-unstyled css-1mknmpt"
>
<thead
class="docblock-argstable-head"
>
<tr>
<th>
<span>
Name
</span>
</th>
<th>
<span>
Description
</span>
</th>
<th>
<span>
Default
</span>
</th>
<th>
<span
class="css-gg4vpm"
>
Control
<button
class="css-1cu29rp"
title="Reset controls"
>
<svg
aria-hidden="true"
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.146 3.854a.5.5 0 010-.708l2-2a.5.5 0 11.708.708L2.707 3h6.295A4 4 0 019 11H3a.5.5 0 010-1h6a3 3 0 100-6H2.707l1.147 1.146a.5.5 0 11-.708.708l-2-2z"
fill="currentColor"
/>
</svg>
</button>
</span>
</th>
</tr>
</thead>
<tbody
class="docblock-argstable-body"
>
<tr>
<td
class="css-4lbn0a"
>
<span
class="css-in3yi3"
>
a
</span>
</td>
<td>
<div
class="css-1rqkmqf"
>
<div
class="css-13nzt7e"
>
<span
class="css-mkjjps"
>
string
</span>
</div>
</div>
</td>
<td>
<div
class="css-13nzt7e"
>
<span
class="css-mkjjps"
>
'a'
</span>
</div>
</td>
<td>
<button
class="css-1vdzwl0"
id="set-a"
>
Set string
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>View in StorybookChrome 1211200x900
Linux Linux Ubuntu 20.04.4
72dbdf on tom/23347-story-globals
Caught exception in
play functionThis story threw an error after it finished rendering which means interactions may not have been executed fully.
Error: Found multiple elements with the text: SubcomponentA
Here are the matching elements:
Ignored nodes: comments, script, style
<button
class="tabbutton css-xq6kj3"
id="tabbutton-prop-table-div-subcomponenta"
role="tab"
type="button"
>
SubcomponentA
</button>
Ignored nodes: comments, script, style
<button
class="tabbutton css-xq6kj3"
id="tabbutton-prop-table-div-subcomponenta"
role="tab"
type="button"
>
SubcomponentA
</button>
(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).
Ignored nodes: comments, script, style
<div
id="storybook-root"
>
<div
class="css-ec0dpa"
data-side="left"
>
<div
class="sbdocs sbdocs-wrapper css-k7lbue"
>
<div
class="sbdocs sbdocs-content css-qa4clq"
>
<div
class="css-13o7eu2"
>
<div
class="sb-bar undefined css-1i892q"
>
<div
class="css-p1dfi6"
>
<div
class="css-4ii5m"
>
<div
class="css-vg9inr"
role="tablist"
style="white-space: normal;"
>
<button
class="tabbutton tabbutton-active css-abbmds"
id="tabbutton-prop-table-div-controlsparameters"
role="tab"
type="button"
>
ControlsParameters
</button>
<button
class="tabbutton css-xq6kj3"
id="tabbutton-prop-table-div-subcomponenta"
role="tab"
type="button"
>
SubcomponentA
</button>
<button
class="tabbutton css-xq6kj3"
id="tabbutton-prop-table-div-subcomponentb"
role="tab"
type="button"
>
SubcomponentB
</button>
<div
class="css-c3junj"
>
<button
aria-hidden="true"
class="tabbutton css-1yaygvy"
role="tab"
style="visibility: hidden;"
type="button"
>
Tabs
<span
class="addon-collapsible-icon css-rlrctb"
/>
</button>
</div>
</div>
</div>
</div>
</div>
<div
class="css-s2td8l"
id="panel-tab-content"
>
<div
class="css-14m39zm"
>
<table
class="docblock-argstable sb-unstyled css-v2ifgj"
>
<thead
class="docblock-argstable-head"
>
<tr>
<th>
<span>
Name
</span>
</th>
<th>
<span>
Description
</span>
</th>
<th>
<span>
Default
</span>
</th>
<th>
<span
class="css-gg4vpm"
>
Control
<button
class="css-1cu29rp"
title="Reset controls"
>
<svg
aria-hidden="true"
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.146 3.854a.5.5 0 010-.708l2-2a.5.5 0 11.708.708L2.707 3h6.295A4 4 0 019 11H3a.5.5 0 010-1h6a3 3 0 100-6H2.707l1.147 1.146a.5.5 0 11-.708.708l-2-2z"
fill="currentColor"
/>
</svg>
</button>
</span>
</th>
</tr>
</thead>
<tbody
class="docblock-argstable-body"
>
<tr>
<td
class="css-4lbn0a"
>
<span
class="css-in3yi3"
>
a
</span>
</td>
<td>
<div
class="css-1f9domv"
>
<div
class="css-13nzt7e"
>
<span
class="css-o1d7ko"
>
string
</span>
</div>
</div>
</td>
<td>
<div
class="css-13nzt7e"
>
<span
class="css-o1d7ko"
>
'a'
</span>
</div>
</td>
<td>
<button
class="css-10lkeuu"
id="set-a"
>
Set string
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="css-b8mu1s"
data-side="right"
>
<div
class="sbdocs sbdocs-wrapper css-1s5i75q"
>
<div
class="sbdocs sbdocs-content css-q22hxw"
>
<div
class="css-13o7eu2"
>
<div
class="sb-bar undefined css-1nhlm6u"
>
<div
class="css-p1dfi6"
>
<div
class="css-4ii5m"
>
<div
class="css-vg9inr"
role="tablist"
style="white-space: normal;"
>
<button
class="tabbutton tabbutton-active css-abbmds"
id="tabbutton-prop-table-div-controlsparameters"
role="tab"
type="button"
>
ControlsParameters
</button>
<button
class="tabbutton css-xq6kj3"
id="tabbutton-prop-table-div-subcomponenta"
role="tab"
type="button"
>
SubcomponentA
</button>
<button
class="tabbutton css-xq6kj3"
id="tabbutton-prop-table-div-subcomponentb"
role="tab"
type="button"
>
SubcomponentB
</button>
<div
class="css-c3junj"
>
<button
aria-hidden="true"
class="tabbutton css-1yaygvy"
role="tab"
style="visibility: hidden;"
type="button"
>
Tabs
<span
class="addon-collapsible-icon css-rlrctb"
/>
</button>
</div>
</div>
</div>
</div>
</div>
<div
class="css-12lobhp"
id="panel-tab-content"
>
<div
class="css-14m39zm"
>
<table
class="docblock-argstable sb-unstyled css-1mknmpt"
>
<thead
class="docblock-argstable-head"
>
<tr>
<th>
<span>
Name
</span>
</th>
<th>
<span>
Description
</span>
</th>
<th>
<span>
Default
</span>
</th>
<th>
<span
class="css-gg4vpm"
>
Control
<button
class="css-1cu29rp"
title="Reset controls"
>
<svg
aria-hidden="true"
fill="none"
height="14"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.146 3.854a.5.5 0 010-.708l2-2a.5.5 0 11.708.708L2.707 3h6.295A4 4 0 019 11H3a.5.5 0 010-1h6a3 3 0 100-6H2.707l1.147 1.146a.5.5 0 11-.708.708l-2-2z"
fill="currentColor"
/>
</svg>
</button>
</span>
</th>
</tr>
</thead>
<tbody
class="docblock-argstable-body"
>
<tr>
<td
class="css-4lbn0a"
>
<span
class="css-in3yi3"
>
a
</span>
</td>
<td>
<div
class="css-1rqkmqf"
>
<div
class="css-13nzt7e"
>
<span
class="css-mkjjps"
>
string
</span>
</div>
</div>
</td>
<td>
<div
class="css-13nzt7e"
>
<span
class="css-mkjjps"
>
'a'
</span>
</div>
</td>
<td>
<button
class="css-1vdzwl0"
id="set-a"
>
Set string
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
at Ea (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/index-a2f9a4a0.js:143:3360)
at https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/index-a2f9a4a0.js:151:235
at sn.invoke (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/index-469d1c44.js:28:9372)
at sn.track (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/index-469d1c44.js:28:6505)
at Object.findByText (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/index-469d1c44.js:28:5777)
at https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/Controls.stories-4c26cd34.js:1:2162
at https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/sb-preview/runtime.js:7585:19
at https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/index-469d1c44.js:28:9292
at Object.step (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/preview-3dccaa40.js:1:70)
at sn.invoke (https://635781f3500dd2c49e189caf-svyjgyayuj.capture-loopback.chromatic.com/assets/index-469d1c44.js:28:9372)