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-argtypesparameters"
role="tab"
type="button"
>
ArgTypesParameters
</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>
</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>
</tr>
<tr>
<td
class="css-4lbn0a"
>
<span
class="css-in3yi3"
>
b
</span>
<span
class="css-1ywjlcj"
title="Required"
>
*
</span>
</td>
<td>
<div
class="css-1f9domv"
>
<div
class="css-13nzt7e"
>
<span
class="css-o1d7ko"
>
string
</span>
</div>
</div>
</td>
<td>
<span>
-
</span>
</td>
</tr>
<tr>
<td
class="css-4lbn0a"
>
<span
class="css-in3yi3"
>
Extra Meta
</span>
</td>
<td>
<div
class="css-18pz2h2"
>
<span>
An extra argtype added at the meta level
</span>
</div>
<div
class="css-1ije3e2"
>
<div
class="css-13nzt7e"
>
<span
class="css-o1d7ko"
>
string
</span>
</div>
</div>
</td>
<td>
<div
class="css-13nzt7e"
>
<span
class="css-o1d7ko"
>
'a default value'
</span>
</div>
</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-argtypesparameters"
role="tab"
type="button"
>
ArgTypesParameters
</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>
</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>
</tr>
<tr>
<td
class="css-4lbn0a"
>
<span
class="css-in3yi3"
>
b
</span>
<span
class="css-1ywjlcj"
title="Required"
>
*
</span>
</td>
<td>
<div
class="css-1rqkmqf"
>
<div
class="css-13nzt7e"
>
<span
class="css-mkjjps"
>
string
</span>
</div>
</div>
</td>
<td>
<span>
-
</span>
</td>
</tr>
<tr>
<td
class="css-4lbn0a"
>
<span
class="css-in3yi3"
>
Extra Meta
</span>
</td>
<td>
<div
class="css-1dcevyo"
>
<span>
An extra argtype added at the meta level
</span>
</div>
<div
class="css-1fmyjb7"
>
<div
class="css-13nzt7e"
>
<span
class="css-mkjjps"
>
string
</span>
</div>
</div>
</td>
<td>
<div
class="css-13nzt7e"
>
<span
class="css-mkjjps"
>
'a default value'
</span>
</div>
</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-argtypesparameters"
role="tab"
type="button"
>
ArgTypesParameters
</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>
</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>
</tr>
<tr>
<td
class="css-4lbn0a"
>
<span
class="css-in3yi3"
>
b
</span>
<span
class="css-1ywjlcj"
title="Required"
>
*
</span>
</td>
<td>
<div
class="css-1f9domv"
>
<div
class="css-13nzt7e"
>
<span
class="css-o1d7ko"
>
string
</span>
</div>
</div>
</td>
<td>
<span>
-
</span>
</td>
</tr>
<tr>
<td
class="css-4lbn0a"
>
<span
class="css-in3yi3"
>
Extra Meta
</span>
</td>
<td>
<div
class="css-18pz2h2"
>
<span>
An extra argtype added at the meta level
</span>
</div>
<div
class="css-1ije3e2"
>
<div
class="css-13nzt7e"
>
<span
class="css-o1d7ko"
>
string
</span>
</div>
</div>
</td>
<td>
<div
class="css-13nzt7e"
>
<span
class="css-o1d7ko"
>
'a default value'
</span>
</div>
</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-argtypesparameters"
role="tab"
type="button"
>
ArgTypesParameters
</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>
</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>
</tr>
<tr>
<td
class="css-4lbn0a"
>
<span
class="css-in3yi3"
>
b
</span>
<span
class="css-1ywjlcj"
title="Required"
>
*
</span>
</td>
<td>
<div
class="css-1rqkmqf"
>
<div
class="css-13nzt7e"
>
<span
class="css-mkjjps"
>
string
</span>
</div>
</div>
</td>
<td>
<span>
-
</span>
</td>
</tr>
<tr>
<td
class="css-4lbn0a"
>
<span
class="css-in3yi3"
>
Extra Meta
</span>
</td>
<td>
<div
class="css-1dcevyo"
>
<span>
An extra argtype added at the meta level
</span>
</div>
<div
class="css-1fmyjb7"
>
<div
class="css-13nzt7e"
>
<span
class="css-mkjjps"
>
string
</span>
</div>
</div>
</td>
<td>
<div
class="css-13nzt7e"
>
<span
class="css-mkjjps"
>
'a default value'
</span>
</div>
</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-argtypesparameters"
role="tab"
type="button"
>
ArgTypesParameters
</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>
</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>
</tr>
<tr>
<td
class="css-4lbn0a"
>
<span
class="css-in3yi3"
>
b
</span>
<span
class="css-1ywjlcj"
title="Required"
>
*
</span>
</td>
<td>
<div
class="css-1f9domv"
>
<div
class="css-13nzt7e"
>
<span
class="css-o1d7ko"
>
string
</span>
</div>
</div>
</td>
<td>
<span>
-
</span>
</td>
</tr>
<tr>
<td
class="css-4lbn0a"
>
<span
class="css-in3yi3"
>
Extra Meta
</span>
</td>
<td>
<div
class="css-18pz2h2"
>
<span>
An extra argtype added at the meta level
</span>
</div>
<div
class="css-1ije3e2"
>
<div
class="css-13nzt7e"
>
<span
class="css-o1d7ko"
>
string
</span>
</div>
</div>
</td>
<td>
<div
class="css-13nzt7e"
>
<span
class="css-o1d7ko"
>
'a default value'
</span>
</div>
</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-argtypesparameters"
role="tab"
type="button"
>
ArgTypesParameters
</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>
</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>
</tr>
<tr>
<td
class="css-4lbn0a"
>
<span
class="css-in3yi3"
>
b
</span>
<span
class="css-1ywjlcj"
title="Required"
>
*
</span>
</td>
<td>
<div
class="css-1rqkmqf"
>
<div
class="css-13nzt7e"
>
<span
class="css-mkjjps"
>
string
</span>
</div>
</div>
</td>
<td>
<span>
-
</span>
</td>
</tr>
<tr>
<td
class="css-4lbn0a"
>
<span
class="css-in3yi3"
>
Extra Meta
</span>
</td>
<td>
<div
class="css-1dcevyo"
>
<span>
An extra argtype added at the meta level
</span>
</div>
<div
class="css-1fmyjb7"
>
<div
class="css-13nzt7e"
>
<span
class="css-mkjjps"
>
string
</span>
</div>
</div>
</td>
<td>
<div
class="css-13nzt7e"
>
<span
class="css-mkjjps"
>
'a default value'
</span>
</div>
</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/ArgTypes.stories-c208f259.js:1:4005
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)