Resources requested by the new story could not be loaded. Snapshots may be affected.
Fail
Unable to find an accessible element with the role "button" and name "View start details" Here are the accessible roles: button: Name "Build timeline 47s": <button class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textNeutral MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorNeutral MuiButton-root MuiButton-text MuiButton-textNeutral MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorNeutral css-ke57i8" tabindex="0" type="button" /> Name "View plan details": <button aria-label="View plan details" class="css-x0syfl" type="button" /> Name "View run startup scripts details": <button aria-label="View run startup scripts details" class="css-18fx0nb" type="button" /> -------------------------------------------------- banner: Name "": <header class="css-2uhb94" /> Name "": <header class="css-2uhb94" /> -------------------------------------------------- list: Name "": <ul class="css-gnnifq" /> Name "": <ul class="css-gnnifq" /> Name "": <ul class="css-w7rr6b" /> -------------------------------------------------- listitem: Name "": <li class="css-q85mhj" id="init" style="height: 32px;" /> Name "": <li class="css-q85mhj" id="plan" style="height: 32px;" /> Name "": <li class="css-q85mhj" id="graph" style="height: 32px;" /> Name "": <li class="css-q85mhj" id="apply" style="height: 32px;" /> Name "": <li class="css-q85mhj" id="connect" style="height: 32px;" /> Name "": <li class="css-q85mhj" id="start" style="height: 32px;" /> Name "": <li class="css-oku830" /> Name "": <li class="css-oku830" /> Name "": <li class="css-oku830" /> Name "": <li class="css-oku830" /> Name "": <li class="css-oku830" /> Name "": <li class="css-oku830" /> Name "": <li class="css-oku830" /> Name "": <li class="css-oku830" /> Name "": <li class="css-oku830" /> Name "": <li class="css-oku830" /> -------------------------------------------------- presentation: Name "": <div class="css-179ih90" role="presentation" /> -------------------------------------------------- Ignored nodes: comments, script, style <div id="storybook-root" > <div class="css-suo6gk" > <button class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textNeutral MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorNeutral MuiButton-root MuiButton-text MuiButton-textNeutral MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorNeutral css-ke57i8" tabindex="0" type="button" > <svg aria-hidden="true" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vg4nxz" data-testid="KeyboardArrowUpIcon" focusable="false" viewBox="0 0 24 24" > <path d="M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z" /> </svg> <span> Build timeline </span> <span class="css-1kegbfk" > 47s </span> </button> <div class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-entered css-c4sutr" style="min-height: 0px;" > <div class="MuiCollapse-wrapper MuiCollapse-vertical css-hboir5" > <div class="MuiCollapse-wrapperInner MuiCollapse-vertical css-8atqhb" > <div class="css-1aqatfr" > <div class="css-3t0rl0" > <div class="css-1ipoul4" style="--scroll-mask-opacity: 0;" > <div class="css-1gmgvsx" > <section class="css-1c93rfx" > <header class="css-2uhb94" > provisioning </header> <ul class="css-gnnifq" > <li class="css-q85mhj" id="init" style="height: 32px;" > <span> <span class="css-yi2y4o" > init <svg aria-hidden="true" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1qz62ap" data-testid="InfoOutlinedIcon" focusable="false" viewBox="0 0 24 24" > <path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8" /> </svg> </span> </span> </li> <li class="css-q85mhj" id="plan" style="height: 32px;" > <span> <span class="css-yi2y4o" > plan <svg aria-hidden="true" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1qz62ap" data-testid="InfoOutlinedIcon" focusable="false" viewBox="0 0 24 24" > <path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8" /> </svg> </span> </span> </li> <li class="css-q85mhj" id="graph" style="height: 32px;" > <span> <span class="css-yi2y4o" > graph <svg aria-hidden="true" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1qz62ap" data-testid="InfoOutlinedIcon" focusable="false" viewBox="0 0 24 24" > <path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8" /> </svg> </span> </span> </li> <li class="css-q85mhj" id="apply" style="height: 32px;" > <span> <span class="css-yi2y4o" > apply <svg aria-hidden="true" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1qz62ap" data-testid="InfoOutlinedIcon" focusable="false" viewBox="0 0 24 24" > <path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8" /> </svg> </span> </span> </li> </ul> </section> <section class="css-1c93rfx" > <header class="css-2uhb94" > dev </header> <ul class="css-gnnifq" > <li class="css-q85mhj" id="connect" style="height: 32px;" > <span> <span class="css-yi2y4o" > connect <svg aria-hidden="true" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1qz62ap" data-testid="InfoOutlinedIcon" focusable="false" viewBox="0 0 24 24" > <path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8" /> </svg> </span> </span> </li> <li class="css-q85mhj" id="start" style="height: 32px;" > <span> <span class="css-yi2y4o" > run startup scripts <svg aria-hidden="true" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1qz62ap" data-testid="InfoOutlinedIcon" focusable="false" viewBox="0 0 24 24" > <path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8" /> </svg> </span> </span> </li> </ul> </section> </div> <div class="css-eipk3c" style="--x-axis-width: 130px;" > <ul class="css-w7rr6b" > <li class="css-oku830" > 5,000ms </li> <li class="css-oku830" > 10,000ms </li> <li class="css-oku830" > 15,000ms </li> <li class="css-oku830" > 20,000ms </li> <li class="css-oku830" > 25,000ms </li> <li class="css-oku830" > 30,000ms </li> <li class="css-oku830" > 35,000ms </li> <li class="css-oku830" > 40,000ms </li> <li class="css-oku830" > 45,000ms </li> <li class="css-oku830" > 50,000ms </li> </ul> <section class="css-1wobvtm" > <div aria-labelledby="init" class="css-dvogs3" > <div class="css-168dgm3" /> 9,125ms </div> <div aria-labelledby="plan" class="css-dvogs3" > <button aria-label="View plan details" class="css-x0syfl" type="button" > <div class="css-obqlig" > <div class="css-1hzqgti" > <svg aria-hidden="true" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" data-testid="MoreHorizOutlinedIcon" focusable="false" viewBox="0 0 24 24" > <path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2" /> </svg> </div> </div> </button> 1,656ms </div> <div aria-labelledby="graph" class="css-dvogs3" > <div class="css-1hx6h9h" /> 533ms </div> <div aria-labelledby="apply" class="css-dvogs3" > <div class="css-1lzq9we" /> 2,832ms </div> </section> <section class="css-1wobvtm" > <div aria-labelledby="connect" class="css-dvogs3" > <div class="css-1kds90n" /> 1,000ms </div> <div aria-labelledby="start" class="css-dvogs3" > <button aria-label="View run startup scripts details" class="css-18fx0nb" type="button" > <div class="css-obqlig" > <div class="css-1hzqgti" > <svg aria-hidden="true" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" data-testid="MoreHorizOutlinedIcon" focusable="false" viewBox="0 0 24 24" > <path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2" /> </svg> </div> </div> </button> 29,579ms </div> </section> <div class="css-179ih90" role="presentation" > <div class="css-t4apq2" /> <div class="css-t4apq2" /> <div class="css-t4apq2" /> <div class="css-t4apq2" /> <div class="css-t4apq2" /> <div class="css-t4apq2" /> <div class="css-t4apq2" /> <div class="css-t4apq2" /> <div class="css-t4apq2" /> <div class="css-t4apq2" /> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>View in Storybook
Chrome 121
1168x479
Linux Linux Ubuntu 20.04.4
3e1170 on bq/add-agent-timings
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 "View start details" Here are the accessible roles: button: Name "Build timeline 47s": <button class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textNeutral MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorNeutral MuiButton-root MuiButton-text MuiButton-textNeutral MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorNeutral css-ke57i8" tabindex="0" type="button" /> Name "View plan details": <button aria-label="View plan details" class="css-x0syfl" type="button" /> Name "View run startup scripts details": <button aria-label="View run startup scripts details" class="css-18fx0nb" type="button" /> -------------------------------------------------- banner: Name "": <header class="css-2uhb94" /> Name "": <header class="css-2uhb94" /> -------------------------------------------------- list: Name "": <ul class="css-gnnifq" /> Name "": <ul class="css-gnnifq" /> Name "": <ul class="css-w7rr6b" /> -------------------------------------------------- listitem: Name "": <li class="css-q85mhj" id="init" style="height: 32px;" /> Name "": <li class="css-q85mhj" id="plan" style="height: 32px;" /> Name "": <li class="css-q85mhj" id="graph" style="height: 32px;" /> Name "": <li class="css-q85mhj" id="apply" style="height: 32px;" /> Name "": <li class="css-q85mhj" id="connect" style="height: 32px;" /> Name "": <li class="css-q85mhj" id="start" style="height: 32px;" /> Name "": <li class="css-oku830" /> Name "": <li class="css-oku830" /> Name "": <li class="css-oku830" /> Name "": <li class="css-oku830" /> Name "": <li class="css-oku830" /> Name "": <li class="css-oku830" /> Name "": <li class="css-oku830" /> Name "": <li class="css-oku830" /> Name "": <li class="css-oku830" /> Name "": <li class="css-oku830" /> -------------------------------------------------- presentation: Name "": <div class="css-179ih90" role="presentation" /> -------------------------------------------------- Ignored nodes: comments, script, style <div id="storybook-root" > <div class="css-suo6gk" > <button class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textNeutral MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorNeutral MuiButton-root MuiButton-text MuiButton-textNeutral MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorNeutral css-ke57i8" tabindex="0" type="button" > <svg aria-hidden="true" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vg4nxz" data-testid="KeyboardArrowUpIcon" focusable="false" viewBox="0 0 24 24" > <path d="M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z" /> </svg> <span> Build timeline </span> <span class="css-1kegbfk" > 47s </span> </button> <div class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-entered css-c4sutr" style="min-height: 0px;" > <div class="MuiCollapse-wrapper MuiCollapse-vertical css-hboir5" > <div class="MuiCollapse-wrapperInner MuiCollapse-vertical css-8atqhb" > <div class="css-1aqatfr" > <div class="css-3t0rl0" > <div class="css-1ipoul4" style="--scroll-mask-opacity: 0;" > <div class="css-1gmgvsx" > <section class="css-1c93rfx" > <header class="css-2uhb94" > provisioning </header> <ul class="css-gnnifq" > <li class="css-q85mhj" id="init" style="height: 32px;" > <span> <span class="css-yi2y4o" > init <svg aria-hidden="true" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1qz62ap" data-testid="InfoOutlinedIcon" focusable="false" viewBox="0 0 24 24" > <path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8" /> </svg> </span> </span> </li> <li class="css-q85mhj" id="plan" style="height: 32px;" > <span> <span class="css-yi2y4o" > plan <svg aria-hidden="true" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1qz62ap" data-testid="InfoOutlinedIcon" focusable="false" viewBox="0 0 24 24" > <path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8" /> </svg> </span> </span> </li> <li class="css-q85mhj" id="graph" style="height: 32px;" > <span> <span class="css-yi2y4o" > graph <svg aria-hidden="true" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1qz62ap" data-testid="InfoOutlinedIcon" focusable="false" viewBox="0 0 24 24" > <path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8" /> </svg> </span> </span> </li> <li class="css-q85mhj" id="apply" style="height: 32px;" > <span> <span class="css-yi2y4o" > apply <svg aria-hidden="true" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1qz62ap" data-testid="InfoOutlinedIcon" focusable="false" viewBox="0 0 24 24" > <path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8" /> </svg> </span> </span> </li> </ul> </section> <section class="css-1c93rfx" > <header class="css-2uhb94" > dev </header> <ul class="css-gnnifq" > <li class="css-q85mhj" id="connect" style="height: 32px;" > <span> <span class="css-yi2y4o" > connect <svg aria-hidden="true" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1qz62ap" data-testid="InfoOutlinedIcon" focusable="false" viewBox="0 0 24 24" > <path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8" /> </svg> </span> </span> </li> <li class="css-q85mhj" id="start" style="height: 32px;" > <span> <span class="css-yi2y4o" > run startup scripts <svg aria-hidden="true" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1qz62ap" data-testid="InfoOutlinedIcon" focusable="false" viewBox="0 0 24 24" > <path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8" /> </svg> </span> </span> </li> </ul> </section> </div> <div class="css-eipk3c" style="--x-axis-width: 130px;" > <ul class="css-w7rr6b" > <li class="css-oku830" > 5,000ms </li> <li class="css-oku830" > 10,000ms </li> <li class="css-oku830" > 15,000ms </li> <li class="css-oku830" > 20,000ms </li> <li class="css-oku830" > 25,000ms </li> <li class="css-oku830" > 30,000ms </li> <li class="css-oku830" > 35,000ms </li> <li class="css-oku830" > 40,000ms </li> <li class="css-oku830" > 45,000ms </li> <li class="css-oku830" > 50,000ms </li> </ul> <section class="css-1wobvtm" > <div aria-labelledby="init" class="css-dvogs3" > <div class="css-168dgm3" /> 9,125ms </div> <div aria-labelledby="plan" class="css-dvogs3" > <button aria-label="View plan details" class="css-x0syfl" type="button" > <div class="css-obqlig" > <div class="css-1hzqgti" > <svg aria-hidden="true" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" data-testid="MoreHorizOutlinedIcon" focusable="false" viewBox="0 0 24 24" > <path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2" /> </svg> </div> </div> </button> 1,656ms </div> <div aria-labelledby="graph" class="css-dvogs3" > <div class="css-1hx6h9h" /> 533ms </div> <div aria-labelledby="apply" class="css-dvogs3" > <div class="css-1lzq9we" /> 2,832ms </div> </section> <section class="css-1wobvtm" > <div aria-labelledby="connect" class="css-dvogs3" > <div class="css-1kds90n" /> 1,000ms </div> <div aria-labelledby="start" class="css-dvogs3" > <button aria-label="View run startup scripts details" class="css-18fx0nb" type="button" > <div class="css-obqlig" > <div class="css-1hzqgti" > <svg aria-hidden="true" class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" data-testid="MoreHorizOutlinedIcon" focusable="false" viewBox="0 0 24 24" > <path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2" /> </svg> </div> </div> </button> 29,579ms </div> </section> <div class="css-179ih90" role="presentation" > <div class="css-t4apq2" /> <div class="css-t4apq2" /> <div class="css-t4apq2" /> <div class="css-t4apq2" /> <div class="css-t4apq2" /> <div class="css-t4apq2" /> <div class="css-t4apq2" /> <div class="css-t4apq2" /> <div class="css-t4apq2" /> <div class="css-t4apq2" /> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> at Object.getElementError (https://624de63c6aacee003aa84340-vfsixxxgbz.capture-loopback.chromatic.com/assets/index-WYMwVPUu.js:116:284) at https://624de63c6aacee003aa84340-vfsixxxgbz.capture-loopback.chromatic.com/assets/index-WYMwVPUu.js:138:164 at https://624de63c6aacee003aa84340-vfsixxxgbz.capture-loopback.chromatic.com/assets/index-WYMwVPUu.js:130:4148 at https://624de63c6aacee003aa84340-vfsixxxgbz.capture-loopback.chromatic.com/assets/index-WYMwVPUu.js:138:387 at cn.invoke (https://624de63c6aacee003aa84340-vfsixxxgbz.capture-loopback.chromatic.com/assets/index-U6Do-Xt6.js:28:8806) at cn.track (https://624de63c6aacee003aa84340-vfsixxxgbz.capture-loopback.chromatic.com/assets/index-U6Do-Xt6.js:28:6144) at Object.getByRole (https://624de63c6aacee003aa84340-vfsixxxgbz.capture-loopback.chromatic.com/assets/index-U6Do-Xt6.js:28:5517) at play (https://624de63c6aacee003aa84340-vfsixxxgbz.capture-loopback.chromatic.com/assets/WorkspaceTimings.stories-BsLf8Bne.js:1:14107) at playFunction (https://624de63c6aacee003aa84340-vfsixxxgbz.capture-loopback.chromatic.com/sb-preview/runtime.js:113:6184) at https://624de63c6aacee003aa84340-vfsixxxgbz.capture-loopback.chromatic.com/sb-preview/runtime.js:144:3903