Fail
Unable to find an accessible element with the role "button" and name "Open"
Here are the accessible roles:
presentation:
Name "":
<div
class="MuiModal-root MuiDrawer-root MuiDrawer-modal css-1lubqfd"
data-testid="bottom-drawer"
role="presentation"
/>
--------------------------------------------------
banner:
Name "":
<header
class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiAppBar-root MuiAppBar-colorDefault MuiAppBar-positionSticky css-1bbwbir"
data-testid="side-header"
/>
--------------------------------------------------
button:
Name "":
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-ql7igq"
tabindex="0"
type="button"
/>
Name "Component which does not need padding":
<div
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-gutters css-bzqm75"
role="button"
tabindex="0"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body
class="sb-main-fullscreen sb-show-main"
style="overflow: hidden;"
>
<div
aria-hidden="true"
class="sb-preparing-story sb-wrapper"
>
<div
class="sb-loader"
/>
</div>
<div
aria-hidden="true"
class="sb-preparing-docs sb-wrapper"
>
<div
class="sb-previewBlock"
>
<div
class="sb-previewBlock_header"
>
<div
class="sb-previewBlock_icon"
/>
<div
class="sb-previewBlock_icon"
/>
<div
class="sb-previewBlock_icon"
/>
<div
class="sb-previewBlock_icon"
/>
</div>
<div
class="sb-previewBlock_body"
>
<div
class="sb-loader"
/>
</div>
</div>
<table
aria-hidden="true"
class="sb-argstableBlock"
>
<thead
class="sb-argstableBlock-head"
>
<tr>
<th>
<span>
Name
</span>
</th>
<th>
<span>
Description
</span>
</th>
<th>
<span>
Default
</span>
</th>
<th>
<span>
Control
</span>
</th>
</tr>
</thead>
<tbody
class="sb-argstableBlock-body"
>
<tr>
<td>
<span>
propertyName
</span>
<span
title="Required"
>
*
</span>
</td>
<td>
<div>
<span>
This is a short description
</span>
</div>
<div
class="sb-argstableBlock-summary"
>
<div>
<span
class="sb-argstableBlock-code"
>
summary
</span>
</div>
</div>
</td>
<td>
<div>
<span
class="sb-argstableBlock-code"
>
defaultValue
</span>
</div>
</td>
<td>
<button>
Set string
</button>
</td>
</tr>
<tr>
<td>
<span>
propertyName
</span>
<span>
*
</span>
</td>
<td>
<div>
<span>
This is a short description
</span>
</div>
<div
class="sb-argstableBlock-summary"
>
<div>
<span
class="sb-argstableBlock-code"
>
summary
</span>
</div>
</div>
</td>
<td>
<div>
<span
class="sb-argstableBlock-code"
>
defaultValue
</span>
</div>
</td>
<td>
<button>
Set string
</button>
</td>
</tr>
<tr>
<td>
<span>
propertyName
</span>
<span>
*
</span>
</td>
<td>
<div>
<span>
This is a short description
</span>
</div>
<div
class="sb-argstableBlock-summary"
>
<div>
<span
class="sb-argstableBlock-code"
>
summary
</span>
</div>
</div>
</td>
<td>
<div>
<span
class="sb-argstableBlock-code"
>
defaultValue
</span>
</div>
</td>
<td>
<button>
Set string
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div
aria-hidden="true"
class="sb-nopreview sb-wrapper"
>
<div
class="sb-nopreview_main"
>
<h1
class="sb-nopreview_heading sb-heading"
>
No Preview
</h1>
<p>
Sorry, but you either have no stories or none are selected somehow.
</p>
<ul>
<li>
Please check the Storybook config.
</li>
<li>
Try reloading the page.
</li>
</ul>
<p>
If the problem persists, check the browser console, or the terminal you've run Storybook from.
</p>
</div>
</div>
<div
aria-hidden="true"
class="sb-errordisplay sb-wrapper"
>
<pre
class="sb-heading"
id="error-message"
/>
<pre
class="sb-errordisplay_code"
>
<code
id="error-stack"
/>
</pre>
</div>
<div
aria-hidden="true"
id="root"
>
<div
class="MuiBox-root css-19cpi76"
>
<div
class="css-1ip1k63"
>
<div
class="css-1e3xqou"
>
<div
class="MuiBox-root css-hbsnkx"
id="app-header"
>
<header
class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionFixed mui-fixed css-9t1hsi"
role="banner"
>
<div
class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-dense css-hmvyat"
>
<div
class="css-1x05v4l"
>
<button
aria-label="open drawer"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit MuiIconButton-edgeStart MuiIconButton-sizeLarge css-1x52uzk"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1w2t4ga"
data-testid="MenuIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
/>
</svg>
<span
class="MuiTouchRipple-root css-w0pj6f"
/>
</button>
<div
class="css-1jr9faw"
>
<span
style="box-sizing: border-box; display: inline-block; overflow: hidden; width: 32px; height: 32px; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: r...View in Storybook
Chrome 89360x900
Linux Amazon Linux 2
885228 on 23-02-ZL-refactor-page-wrapper
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 accessible element with the role "button" and name "Open"
Here are the accessible roles:
presentation:
Name "":
<div
class="MuiModal-root MuiDrawer-root MuiDrawer-modal css-1lubqfd"
data-testid="bottom-drawer"
role="presentation"
/>
--------------------------------------------------
banner:
Name "":
<header
class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiAppBar-root MuiAppBar-colorDefault MuiAppBar-positionSticky css-1bbwbir"
data-testid="side-header"
/>
--------------------------------------------------
button:
Name "":
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-ql7igq"
tabindex="0"
type="button"
/>
Name "Component which does not need padding":
<div
class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-gutters css-bzqm75"
role="button"
tabindex="0"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body
class="sb-main-fullscreen sb-show-main"
style="overflow: hidden;"
>
<div
aria-hidden="true"
class="sb-preparing-story sb-wrapper"
>
<div
class="sb-loader"
/>
</div>
<div
aria-hidden="true"
class="sb-preparing-docs sb-wrapper"
>
<div
class="sb-previewBlock"
>
<div
class="sb-previewBlock_header"
>
<div
class="sb-previewBlock_icon"
/>
<div
class="sb-previewBlock_icon"
/>
<div
class="sb-previewBlock_icon"
/>
<div
class="sb-previewBlock_icon"
/>
</div>
<div
class="sb-previewBlock_body"
>
<div
class="sb-loader"
/>
</div>
</div>
<table
aria-hidden="true"
class="sb-argstableBlock"
>
<thead
class="sb-argstableBlock-head"
>
<tr>
<th>
<span>
Name
</span>
</th>
<th>
<span>
Description
</span>
</th>
<th>
<span>
Default
</span>
</th>
<th>
<span>
Control
</span>
</th>
</tr>
</thead>
<tbody
class="sb-argstableBlock-body"
>
<tr>
<td>
<span>
propertyName
</span>
<span
title="Required"
>
*
</span>
</td>
<td>
<div>
<span>
This is a short description
</span>
</div>
<div
class="sb-argstableBlock-summary"
>
<div>
<span
class="sb-argstableBlock-code"
>
summary
</span>
</div>
</div>
</td>
<td>
<div>
<span
class="sb-argstableBlock-code"
>
defaultValue
</span>
</div>
</td>
<td>
<button>
Set string
</button>
</td>
</tr>
<tr>
<td>
<span>
propertyName
</span>
<span>
*
</span>
</td>
<td>
<div>
<span>
This is a short description
</span>
</div>
<div
class="sb-argstableBlock-summary"
>
<div>
<span
class="sb-argstableBlock-code"
>
summary
</span>
</div>
</div>
</td>
<td>
<div>
<span
class="sb-argstableBlock-code"
>
defaultValue
</span>
</div>
</td>
<td>
<button>
Set string
</button>
</td>
</tr>
<tr>
<td>
<span>
propertyName
</span>
<span>
*
</span>
</td>
<td>
<div>
<span>
This is a short description
</span>
</div>
<div
class="sb-argstableBlock-summary"
>
<div>
<span
class="sb-argstableBlock-code"
>
summary
</span>
</div>
</div>
</td>
<td>
<div>
<span
class="sb-argstableBlock-code"
>
defaultValue
</span>
</div>
</td>
<td>
<button>
Set string
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div
aria-hidden="true"
class="sb-nopreview sb-wrapper"
>
<div
class="sb-nopreview_main"
>
<h1
class="sb-nopreview_heading sb-heading"
>
No Preview
</h1>
<p>
Sorry, but you either have no stories or none are selected somehow.
</p>
<ul>
<li>
Please check the Storybook config.
</li>
<li>
Try reloading the page.
</li>
</ul>
<p>
If the problem persists, check the browser console, or the terminal you've run Storybook from.
</p>
</div>
</div>
<div
aria-hidden="true"
class="sb-errordisplay sb-wrapper"
>
<pre
class="sb-heading"
id="error-message"
/>
<pre
class="sb-errordisplay_code"
>
<code
id="error-stack"
/>
</pre>
</div>
<div
aria-hidden="true"
id="root"
>
<div
class="MuiBox-root css-19cpi76"
>
<div
class="css-1ip1k63"
>
<div
class="css-1e3xqou"
>
<div
class="MuiBox-root css-hbsnkx"
id="app-header"
>
<header
class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionFixed mui-fixed css-9t1hsi"
role="banner"
>
<div
class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-dense css-hmvyat"
>
<div
class="css-1x05v4l"
>
<button
aria-label="open drawer"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit MuiIconButton-edgeStart MuiIconButton-sizeLarge css-1x52uzk"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1w2t4ga"
data-testid="MenuIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
/>
</svg>
<span
class="MuiTouchRipple-root css-w0pj6f"
/>
</button>
<div
class="css-1jr9faw"
>
<span
style="box-sizing: border-box; display: inline-block; overflow: hidden; width: 32px; height: 32px; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: r...