Fail
Unable to find an element with the text: /Change count: [1-9]/. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.View in Storybook
Chrome 1401168x148
Linux Ubuntu 24.04.4
75d8ec on vc/chromatic-setup
Caught exception in
play functionThis story threw an error after it finished rendering which means interactions may not have been executed fully.
Error: Unable to find an element with the text: /Change count: [1-9]/. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
Ignored nodes: comments, script, style
<div
id="storybook-root"
>
<div>
<div
class="nimbus-rich-text-input__root css-1h5a7ko"
role="group"
>
<div
class="nimbus-rich-text-input__toolbar css-13qosm9"
>
<div
aria-label="Text formatting"
aria-orientation="horizontal"
class="nimbus-toolbar css-3icp5t"
data-orientation="horizontal"
data-rac=""
role="toolbar"
>
<div
class="nimbus-group css-3fkyor"
data-rac=""
role="group"
>
<button
aria-expanded="false"
aria-haspopup="true"
aria-label="Text style menu"
class="nimbus-menu__trigger css-h6xqq2"
data-rac=""
data-react-aria-pressable="true"
id="react-aria5059822004-_r_0_"
tabindex="0"
type="button"
>
<div
class="css-1ftuxfg"
>
<div
class="css-1903nrj"
>
<p
class="css-1ggps43"
>
Paragraph
</p>
</div>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"
/>
</svg>
</div>
</button>
</div>
<div
aria-orientation="vertical"
class="nimbus-separator css-1bc8knr"
role="separator"
/>
<div
aria-disabled="false"
aria-orientation="horizontal"
class="nimbus-toggle-button-group__root css-3oijsd"
data-orientation="horizontal"
data-rac=""
role="group"
>
<button
aria-label="Bold"
aria-pressed="false"
class="nimbus-toggle-button css-1ehhj9o"
data-rac=""
data-react-aria-pressable="true"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42M10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5"
/>
</svg>
<div
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
>
Bold
</div>
</button>
<button
aria-label="Italic"
aria-pressed="false"
class="nimbus-toggle-button css-1ehhj9o"
data-rac=""
data-react-aria-pressable="true"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z"
/>
</svg>
<div
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
>
Italic
</div>
</button>
<button
aria-label="Underline"
aria-pressed="false"
class="nimbus-toggle-button css-1ehhj9o"
data-rac=""
data-react-aria-pressable="true"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6m-7 2v2h14v-2z"
/>
</svg>
<div
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
>
Underline
</div>
</button>
</div>
<button
aria-expanded="false"
aria-haspopup="true"
aria-label="More formatting options"
class="nimbus-button nimbus-menu__trigger css-1bx5j8d"
data-react-aria-pressable="true"
id="react-aria5059822004-_r_8_"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<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>
</button>
<div
aria-orientation="vertical"
class="nimbus-separator css-1bc8knr"
role="separator"
/>
<div
aria-disabled="false"
aria-label="List formatting"
aria-orientation="horizontal"
class="nimbus-toggle-button-group__root css-3oijsd"
data-orientation="horizontal"
data-rac=""
role="radiogroup"
>
<button
aria-checked="false"
aria-label="Bulleted list"
class="nimbus-toggle-button css-1ehhj9o"
data-rac=""
data-react-aria-pressable="true"
role="radio"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
fill="currentColor"
height="...
at Object.il [as waitFor] (https://6a28137478d14a3a27f4772a-wqmvtkgjuz.capture-loopback.chromatic.com/assets/iframe-DFQ1Mho6.js:129:3299)
at Ile.invoke (https://6a28137478d14a3a27f4772a-wqmvtkgjuz.capture-loopback.chromatic.com/assets/iframe-DFQ1Mho6.js:713:9449)
at Ile.intercept (https://6a28137478d14a3a27f4772a-wqmvtkgjuz.capture-loopback.chromatic.com/assets/iframe-DFQ1Mho6.js:713:6947)
at Ile.track (https://6a28137478d14a3a27f4772a-wqmvtkgjuz.capture-loopback.chromatic.com/assets/iframe-DFQ1Mho6.js:713:6679)
at waitFor (https://6a28137478d14a3a27f4772a-wqmvtkgjuz.capture-loopback.chromatic.com/assets/iframe-DFQ1Mho6.js:713:5997)
at play (https://6a28137478d14a3a27f4772a-wqmvtkgjuz.capture-loopback.chromatic.com/assets/rich-text-input.stories-a8VRzBrs.js:1:10717)
at async tw.runPhase (https://6a28137478d14a3a27f4772a-wqmvtkgjuz.capture-loopback.chromatic.com/assets/iframe-DFQ1Mho6.js:911:609)
at async tw.render (https://6a28137478d14a3a27f4772a-wqmvtkgjuz.capture-loopback.chromatic.com/assets/iframe-DFQ1Mho6.js:911:3470)