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 89
360x900
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...