Fail
Unable to find role="button" and name "Enable"
Ignored nodes: comments, script, style
<div
class="css-nlyae3"
data-canvas="right"
orientation="right"
>
<div
class="css-8x1w9r"
>
<div
class="css-1pjqexw"
>
<div>
<svg
fill="none"
height="53"
viewBox="0 0 52 53"
width="52"
xmlns="http://www.w3.org/2000/svg"
>
<g
filter="url(#filter0_dd_304_317945)"
>
<g
clip-path="url(#clip0_304_317945)"
>
<rect
fill="#288041"
height="40"
rx="8"
width="40"
x="6"
y="2"
/>
<g
clip-path="url(#clip1_304_317945)"
>
<rect
fill="#215D31"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
<rect
fill="#93D4A5"
height="20.1485"
transform="rotate(45 20.6104 20.1591)"
width="20.1485"
x="20.6104"
y="20.1591"
/>
<rect
fill="#93D4A5"
height="20.1485"
transform="rotate(45 30.9502 16.59)"
width="20.1485"
x="30.9502"
y="16.59"
/>
<circle
cx="20.435"
cy="16.2246"
fill="#93D4A5"
r="2.45455"
/>
</g>
<rect
fill="#67B47C"
height="32.25"
transform="rotate(45 7.05469 3)"
width="53.75"
x="7.05469"
y="3"
/>
<g
clip-path="url(#clip2_304_317945)"
>
<g
clip-path="url(#clip3_304_317945)"
>
<rect
fill="#2B733F"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
<rect
fill="#A9E0B8"
height="20.1485"
transform="rotate(45 21.3604 21.6592)"
width="20.1485"
x="21.3604"
y="21.6592"
/>
<rect
fill="#A9E0B8"
height="20.1485"
transform="rotate(45 32.2012 18.5908)"
width="20.1485"
x="32.2012"
y="18.5908"
/>
<circle
cx="21.685"
cy="17.9746"
fill="#A9E0B8"
r="2.45455"
/>
</g>
</g>
</g>
</g>
<defs>
<filter
color-interpolation-filters="sRGB"
filterUnits="userSpaceOnUse"
height="53"
id="filter0_dd_304_317945"
width="52"
x="0"
y="0"
>
<feflood
flood-opacity="0"
result="BackgroundImageFix"
/>
<fecolormatrix
in="SourceAlpha"
result="hardAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feoffset
dy="5"
/>
<fegaussianblur
stdDeviation="3"
/>
<fecomposite
in2="hardAlpha"
operator="out"
/>
<fecolormatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"
/>
<feblend
in2="BackgroundImageFix"
mode="normal"
result="effect1_dropShadow_304_317945"
/>
<fecolormatrix
in="SourceAlpha"
result="hardAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feoffset
dy="1"
/>
<fegaussianblur
stdDeviation="1.5"
/>
<fecomposite
in2="hardAlpha"
operator="out"
/>
<fecolormatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
/>
<feblend
in2="effect1_dropShadow_304_317945"
mode="normal"
result="effect2_dropShadow_304_317945"
/>
<feblend
in="SourceGraphic"
in2="effect2_dropShadow_304_317945"
mode="normal"
result="shape"
/>
</filter>
<clippath
id="clip0_304_317945"
>
<rect
fill="white"
height="40"
rx="8"
width="40"
x="6"
y="2"
/>
</clippath>
<clippath
id="clip1_304_317945"
>
<rect
fill="white"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
</clippath>
<clippath
id="clip2_304_317945"
>
<rect
fill="white"
height="29.9046"
transform="translate(7.20801 3.17212) rotate(45)"
width="60.7428"
/>
</clippath>
<clippath
id="clip3_304_317945"
>
<rect
fill="white"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
</clippath>
</defs>
</svg>
<h1
class="css-rpn2xa"
>
Visual tests
</h1>
<p
class="css-lpn1mp"
>
Catch bugs in UI appearance automatically. Compare image snapshots to detect visual changes.
</p>
</div>
<button
class="css-h1l3p1"
>
Let's do it!
</button>
</div>
</div>
</div>
Ignored nodes: comments, script, style
<div
class="css-nlyae3"
data-canvas="right"
orientation="right"
>
<div
class="css-8x1w9r"
>
<div
class="css-1pjqexw"
>
<div>
<svg
fill="none"
height="53"
viewBox="0 0 52 53"
width="52"
xmlns="http://www.w3.org/2000/svg"
>
<g
filter="url(#filter0_dd_304_317945)"
>
<g
clip-path="url(#clip0_304_317945)"
>
<rect
fill="#288041"
height="40"
rx="8"
width="40"
x="6"
y="2"
/>
<g
clip-path="url(#clip1_304_317945)"
>
<rect
fill="#215D31"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
<rect
fill="#93D4A5"
height="20.1485"
transform="rotate(45 20.6104 20.1591)"
width="20.1485"
x="20.6104"
y="20.1591"
/>
<rect
fill="#93D4A5"
height="20.1485"
transform="rotate(45 30.9502 16.59)"
width="20.1485"
x="30.9502"
y="16.59"
/>
<circle
cx="20.435"
cy="16.2246"
fill="#93D4A5"
r="2.45455"
/>
</g>
<rect
fill="#67B47C"
height="32.25"
transform="rotate(45 7.05469 3)"
width="53.75"
x="7.05469"
y="3"
/>
<g
clip-path="url(#clip2_304_317945)"
>
<g
clip-path="url(#clip3_304_317945)"
>
<rect
fill="#2B733F"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
<rect
fill="#A9E0B8"
height="20.1485"
transform="rotate(45 21.3604 21.6592)"
width="20.1485"
x="21.3604"
y="21.6592"
/>
<rect
fill="#A9E0B8"
height="20.1485"
transform="rotate(45 32.2012 18.5908)"
width="20.1485"
x="32.2012"
y="18.5908"
/>
<circle
cx="21.685"
cy="17.9746"
fill="#A9E0B8"
r="2.45455"
/>
</g>
</g>
</g>
</g>
<defs>
<filter
color-interpolation-filters="sRGB"
filterUnits="userSpaceOnUse"
height="53"
id="filter0_dd_304_317945"
width="52"
x="0"
y="0"
>
<feflood
flood-opacity="0"
result="BackgroundImageFix"
/>
<fecolormatrix
in="SourceAlpha"
result="hardAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feoffset
dy="5"
/>
<fegaussianblur
stdDeviation="3"
/>
<fecomposite
in2="hardAlpha"
operator="out"
/>
<fecolormatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"
/>
<feblend
in2="BackgroundImageFix"
mode="normal"
result="effect1_dropShadow_304_317945"
/>
<fecolormatrix
in="SourceAlpha"
result="hardAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feoffset
dy="1"
/>
<fegaussianblur
stdDeviation="1.5"
/>
<fecomposite
in2="hardAlpha"
operator="out"
/>
<fecolormatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
/>
<feblend
in2="effect1_dropShadow_304_317945"
mode="normal"
result="effect2_dropShadow_304_317945"
/>
<feblend
in="SourceGraphic"
in2="effect2_dropShadow_304_317945"
mode="normal"
result="shape"
/>
</filter>
<clippath
id="clip0_304_317945"
>
<rect
fill="white"
height="40"
rx="8"
width="40"
x="6"
y="2"
/>
</clippath>
<clippath
id="clip1_304_317945"
>
<rect
fill="white"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
</clippath>
<clippath
id="clip2_304_317945"
>
<rect
fill="white"
height="29.9046"
transform="translate(7.20801 3.17212) rotate(45)"
width="60.7428"
/>
</clippath>
<clippath
id="clip3_304_317945"
>
<rect
fill="white"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
</clippath>
</defs>
</svg>
<h1
class="css-rpn2xa"
>
Visual tests
</h1>
<p
class="css-lpn1mp"
>
Catch bugs in UI appearance automatically. Compare image snapshots to detect visual changes.
</p>
</div>
<button
class="css-h1l3p1"
>
Let's do it!
</button>
</div>
</div>
</div>View in Storybook
Chrome 105880x640
Linux Linux Ubuntu 20.04.4
28a25b on norbert/upgrade-storybook-to-latest-patch
Unable to find role="button" and name "Enable"
Ignored nodes: comments, script, style
<div
class="css-tb8xck"
data-canvas="right"
orientation="right"
>
<div
class="css-pmpiqi"
>
<div
class="css-1pjqexw"
>
<div>
<svg
fill="none"
height="53"
viewBox="0 0 52 53"
width="52"
xmlns="http://www.w3.org/2000/svg"
>
<g
filter="url(#filter0_dd_304_317945)"
>
<g
clip-path="url(#clip0_304_317945)"
>
<rect
fill="#288041"
height="40"
rx="8"
width="40"
x="6"
y="2"
/>
<g
clip-path="url(#clip1_304_317945)"
>
<rect
fill="#215D31"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
<rect
fill="#93D4A5"
height="20.1485"
transform="rotate(45 20.6104 20.1591)"
width="20.1485"
x="20.6104"
y="20.1591"
/>
<rect
fill="#93D4A5"
height="20.1485"
transform="rotate(45 30.9502 16.59)"
width="20.1485"
x="30.9502"
y="16.59"
/>
<circle
cx="20.435"
cy="16.2246"
fill="#93D4A5"
r="2.45455"
/>
</g>
<rect
fill="#67B47C"
height="32.25"
transform="rotate(45 7.05469 3)"
width="53.75"
x="7.05469"
y="3"
/>
<g
clip-path="url(#clip2_304_317945)"
>
<g
clip-path="url(#clip3_304_317945)"
>
<rect
fill="#2B733F"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
<rect
fill="#A9E0B8"
height="20.1485"
transform="rotate(45 21.3604 21.6592)"
width="20.1485"
x="21.3604"
y="21.6592"
/>
<rect
fill="#A9E0B8"
height="20.1485"
transform="rotate(45 32.2012 18.5908)"
width="20.1485"
x="32.2012"
y="18.5908"
/>
<circle
cx="21.685"
cy="17.9746"
fill="#A9E0B8"
r="2.45455"
/>
</g>
</g>
</g>
</g>
<defs>
<filter
color-interpolation-filters="sRGB"
filterUnits="userSpaceOnUse"
height="53"
id="filter0_dd_304_317945"
width="52"
x="0"
y="0"
>
<feflood
flood-opacity="0"
result="BackgroundImageFix"
/>
<fecolormatrix
in="SourceAlpha"
result="hardAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feoffset
dy="5"
/>
<fegaussianblur
stdDeviation="3"
/>
<fecomposite
in2="hardAlpha"
operator="out"
/>
<fecolormatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"
/>
<feblend
in2="BackgroundImageFix"
mode="normal"
result="effect1_dropShadow_304_317945"
/>
<fecolormatrix
in="SourceAlpha"
result="hardAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feoffset
dy="1"
/>
<fegaussianblur
stdDeviation="1.5"
/>
<fecomposite
in2="hardAlpha"
operator="out"
/>
<fecolormatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
/>
<feblend
in2="effect1_dropShadow_304_317945"
mode="normal"
result="effect2_dropShadow_304_317945"
/>
<feblend
in="SourceGraphic"
in2="effect2_dropShadow_304_317945"
mode="normal"
result="shape"
/>
</filter>
<clippath
id="clip0_304_317945"
>
<rect
fill="white"
height="40"
rx="8"
width="40"
x="6"
y="2"
/>
</clippath>
<clippath
id="clip1_304_317945"
>
<rect
fill="white"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
</clippath>
<clippath
id="clip2_304_317945"
>
<rect
fill="white"
height="29.9046"
transform="translate(7.20801 3.17212) rotate(45)"
width="60.7428"
/>
</clippath>
<clippath
id="clip3_304_317945"
>
<rect
fill="white"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
</clippath>
</defs>
</svg>
<h1
class="css-rpn2xa"
>
Visual tests
</h1>
<p
class="css-lpn1mp"
>
Catch bugs in UI appearance automatically. Compare image snapshots to detect visual changes.
</p>
</div>
<button
class="css-h1l3p1"
>
Let's do it!
</button>
</div>
</div>
</div>
Ignored nodes: comments, script, style
<div
class="css-tb8xck"
data-canvas="right"
orientation="right"
>
<div
class="css-pmpiqi"
>
<div
class="css-1pjqexw"
>
<div>
<svg
fill="none"
height="53"
viewBox="0 0 52 53"
width="52"
xmlns="http://www.w3.org/2000/svg"
>
<g
filter="url(#filter0_dd_304_317945)"
>
<g
clip-path="url(#clip0_304_317945)"
>
<rect
fill="#288041"
height="40"
rx="8"
width="40"
x="6"
y="2"
/>
<g
clip-path="url(#clip1_304_317945)"
>
<rect
fill="#215D31"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
<rect
fill="#93D4A5"
height="20.1485"
transform="rotate(45 20.6104 20.1591)"
width="20.1485"
x="20.6104"
y="20.1591"
/>
<rect
fill="#93D4A5"
height="20.1485"
transform="rotate(45 30.9502 16.59)"
width="20.1485"
x="30.9502"
y="16.59"
/>
<circle
cx="20.435"
cy="16.2246"
fill="#93D4A5"
r="2.45455"
/>
</g>
<rect
fill="#67B47C"
height="32.25"
transform="rotate(45 7.05469 3)"
width="53.75"
x="7.05469"
y="3"
/>
<g
clip-path="url(#clip2_304_317945)"
>
<g
clip-path="url(#clip3_304_317945)"
>
<rect
fill="#2B733F"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
<rect
fill="#A9E0B8"
height="20.1485"
transform="rotate(45 21.3604 21.6592)"
width="20.1485"
x="21.3604"
y="21.6592"
/>
<rect
fill="#A9E0B8"
height="20.1485"
transform="rotate(45 32.2012 18.5908)"
width="20.1485"
x="32.2012"
y="18.5908"
/>
<circle
cx="21.685"
cy="17.9746"
fill="#A9E0B8"
r="2.45455"
/>
</g>
</g>
</g>
</g>
<defs>
<filter
color-interpolation-filters="sRGB"
filterUnits="userSpaceOnUse"
height="53"
id="filter0_dd_304_317945"
width="52"
x="0"
y="0"
>
<feflood
flood-opacity="0"
result="BackgroundImageFix"
/>
<fecolormatrix
in="SourceAlpha"
result="hardAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feoffset
dy="5"
/>
<fegaussianblur
stdDeviation="3"
/>
<fecomposite
in2="hardAlpha"
operator="out"
/>
<fecolormatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"
/>
<feblend
in2="BackgroundImageFix"
mode="normal"
result="effect1_dropShadow_304_317945"
/>
<fecolormatrix
in="SourceAlpha"
result="hardAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feoffset
dy="1"
/>
<fegaussianblur
stdDeviation="1.5"
/>
<fecomposite
in2="hardAlpha"
operator="out"
/>
<fecolormatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
/>
<feblend
in2="effect1_dropShadow_304_317945"
mode="normal"
result="effect2_dropShadow_304_317945"
/>
<feblend
in="SourceGraphic"
in2="effect2_dropShadow_304_317945"
mode="normal"
result="shape"
/>
</filter>
<clippath
id="clip0_304_317945"
>
<rect
fill="white"
height="40"
rx="8"
width="40"
x="6"
y="2"
/>
</clippath>
<clippath
id="clip1_304_317945"
>
<rect
fill="white"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
</clippath>
<clippath
id="clip2_304_317945"
>
<rect
fill="white"
height="29.9046"
transform="translate(7.20801 3.17212) rotate(45)"
width="60.7428"
/>
</clippath>
<clippath
id="clip3_304_317945"
>
<rect
fill="white"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
</clippath>
</defs>
</svg>
<h1
class="css-rpn2xa"
>
Visual tests
</h1>
<p
class="css-lpn1mp"
>
Catch bugs in UI appearance automatically. Compare image snapshots to detect visual changes.
</p>
</div>
<button
class="css-h1l3p1"
>
Let's do it!
</button>
</div>
</div>
</div>View in StorybookChrome 105880x640
Linux Linux Ubuntu 20.04.4
28a25b on norbert/upgrade-storybook-to-latest-patch
Unable to find role="button" and name "Sign into Chromatic with SSO"
Ignored nodes: comments, script, style
<div
class="css-nlyae3"
data-canvas="right"
orientation="right"
>
<div
class="css-8x1w9r"
>
<div
class="css-1pjqexw"
>
<div>
<svg
fill="none"
height="53"
viewBox="0 0 52 53"
width="52"
xmlns="http://www.w3.org/2000/svg"
>
<g
filter="url(#filter0_dd_304_317945)"
>
<g
clip-path="url(#clip0_304_317945)"
>
<rect
fill="#288041"
height="40"
rx="8"
width="40"
x="6"
y="2"
/>
<g
clip-path="url(#clip1_304_317945)"
>
<rect
fill="#215D31"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
<rect
fill="#93D4A5"
height="20.1485"
transform="rotate(45 20.6104 20.1591)"
width="20.1485"
x="20.6104"
y="20.1591"
/>
<rect
fill="#93D4A5"
height="20.1485"
transform="rotate(45 30.9502 16.59)"
width="20.1485"
x="30.9502"
y="16.59"
/>
<circle
cx="20.435"
cy="16.2246"
fill="#93D4A5"
r="2.45455"
/>
</g>
<rect
fill="#67B47C"
height="32.25"
transform="rotate(45 7.05469 3)"
width="53.75"
x="7.05469"
y="3"
/>
<g
clip-path="url(#clip2_304_317945)"
>
<g
clip-path="url(#clip3_304_317945)"
>
<rect
fill="#2B733F"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
<rect
fill="#A9E0B8"
height="20.1485"
transform="rotate(45 21.3604 21.6592)"
width="20.1485"
x="21.3604"
y="21.6592"
/>
<rect
fill="#A9E0B8"
height="20.1485"
transform="rotate(45 32.2012 18.5908)"
width="20.1485"
x="32.2012"
y="18.5908"
/>
<circle
cx="21.685"
cy="17.9746"
fill="#A9E0B8"
r="2.45455"
/>
</g>
</g>
</g>
</g>
<defs>
<filter
color-interpolation-filters="sRGB"
filterUnits="userSpaceOnUse"
height="53"
id="filter0_dd_304_317945"
width="52"
x="0"
y="0"
>
<feflood
flood-opacity="0"
result="BackgroundImageFix"
/>
<fecolormatrix
in="SourceAlpha"
result="hardAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feoffset
dy="5"
/>
<fegaussianblur
stdDeviation="3"
/>
<fecomposite
in2="hardAlpha"
operator="out"
/>
<fecolormatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"
/>
<feblend
in2="BackgroundImageFix"
mode="normal"
result="effect1_dropShadow_304_317945"
/>
<fecolormatrix
in="SourceAlpha"
result="hardAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feoffset
dy="1"
/>
<fegaussianblur
stdDeviation="1.5"
/>
<fecomposite
in2="hardAlpha"
operator="out"
/>
<fecolormatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
/>
<feblend
in2="effect1_dropShadow_304_317945"
mode="normal"
result="effect2_dropShadow_304_317945"
/>
<feblend
in="SourceGraphic"
in2="effect2_dropShadow_304_317945"
mode="normal"
result="shape"
/>
</filter>
<clippath
id="clip0_304_317945"
>
<rect
fill="white"
height="40"
rx="8"
width="40"
x="6"
y="2"
/>
</clippath>
<clippath
id="clip1_304_317945"
>
<rect
fill="white"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
</clippath>
<clippath
id="clip2_304_317945"
>
<rect
fill="white"
height="29.9046"
transform="translate(7.20801 3.17212) rotate(45)"
width="60.7428"
/>
</clippath>
<clippath
id="clip3_304_317945"
>
<rect
fill="white"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
</clippath>
</defs>
</svg>
<h1
class="css-rpn2xa"
>
Visual tests
</h1>
<p
class="css-lpn1mp"
>
Catch bugs in UI appearance automatically. Compare image snapshots to detect visual changes.
</p>
</div>
<button
class="css-h1l3p1"
>
Let's do it!
</button>
</div>
</div>
</div>
Ignored nodes: comments, script, style
<div
class="css-nlyae3"
data-canvas="right"
orientation="right"
>
<div
class="css-8x1w9r"
>
<div
class="css-1pjqexw"
>
<div>
<svg
fill="none"
height="53"
viewBox="0 0 52 53"
width="52"
xmlns="http://www.w3.org/2000/svg"
>
<g
filter="url(#filter0_dd_304_317945)"
>
<g
clip-path="url(#clip0_304_317945)"
>
<rect
fill="#288041"
height="40"
rx="8"
width="40"
x="6"
y="2"
/>
<g
clip-path="url(#clip1_304_317945)"
>
<rect
fill="#215D31"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
<rect
fill="#93D4A5"
height="20.1485"
transform="rotate(45 20.6104 20.1591)"
width="20.1485"
x="20.6104"
y="20.1591"
/>
<rect
fill="#93D4A5"
height="20.1485"
transform="rotate(45 30.9502 16.59)"
width="20.1485"
x="30.9502"
y="16.59"
/>
<circle
cx="20.435"
cy="16.2246"
fill="#93D4A5"
r="2.45455"
/>
</g>
<rect
fill="#67B47C"
height="32.25"
transform="rotate(45 7.05469 3)"
width="53.75"
x="7.05469"
y="3"
/>
<g
clip-path="url(#clip2_304_317945)"
>
<g
clip-path="url(#clip3_304_317945)"
>
<rect
fill="#2B733F"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
<rect
fill="#A9E0B8"
height="20.1485"
transform="rotate(45 21.3604 21.6592)"
width="20.1485"
x="21.3604"
y="21.6592"
/>
<rect
fill="#A9E0B8"
height="20.1485"
transform="rotate(45 32.2012 18.5908)"
width="20.1485"
x="32.2012"
y="18.5908"
/>
<circle
cx="21.685"
cy="17.9746"
fill="#A9E0B8"
r="2.45455"
/>
</g>
</g>
</g>
</g>
<defs>
<filter
color-interpolation-filters="sRGB"
filterUnits="userSpaceOnUse"
height="53"
id="filter0_dd_304_317945"
width="52"
x="0"
y="0"
>
<feflood
flood-opacity="0"
result="BackgroundImageFix"
/>
<fecolormatrix
in="SourceAlpha"
result="hardAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feoffset
dy="5"
/>
<fegaussianblur
stdDeviation="3"
/>
<fecomposite
in2="hardAlpha"
operator="out"
/>
<fecolormatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"
/>
<feblend
in2="BackgroundImageFix"
mode="normal"
result="effect1_dropShadow_304_317945"
/>
<fecolormatrix
in="SourceAlpha"
result="hardAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feoffset
dy="1"
/>
<fegaussianblur
stdDeviation="1.5"
/>
<fecomposite
in2="hardAlpha"
operator="out"
/>
<fecolormatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
/>
<feblend
in2="effect1_dropShadow_304_317945"
mode="normal"
result="effect2_dropShadow_304_317945"
/>
<feblend
in="SourceGraphic"
in2="effect2_dropShadow_304_317945"
mode="normal"
result="shape"
/>
</filter>
<clippath
id="clip0_304_317945"
>
<rect
fill="white"
height="40"
rx="8"
width="40"
x="6"
y="2"
/>
</clippath>
<clippath
id="clip1_304_317945"
>
<rect
fill="white"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
</clippath>
<clippath
id="clip2_304_317945"
>
<rect
fill="white"
height="29.9046"
transform="translate(7.20801 3.17212) rotate(45)"
width="60.7428"
/>
</clippath>
<clippath
id="clip3_304_317945"
>
<rect
fill="white"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
</clippath>
</defs>
</svg>
<h1
class="css-rpn2xa"
>
Visual tests
</h1>
<p
class="css-lpn1mp"
>
Catch bugs in UI appearance automatically. Compare image snapshots to detect visual changes.
</p>
</div>
<button
class="css-h1l3p1"
>
Let's do it!
</button>
</div>
</div>
</div>View in StorybookChrome 105880x640
Linux Linux Ubuntu 20.04.4
28a25b on norbert/upgrade-storybook-to-latest-patch
Unable to find role="button" and name "Sign into Chromatic with SSO"
Ignored nodes: comments, script, style
<div
class="css-tb8xck"
data-canvas="right"
orientation="right"
>
<div
class="css-pmpiqi"
>
<div
class="css-1pjqexw"
>
<div>
<svg
fill="none"
height="53"
viewBox="0 0 52 53"
width="52"
xmlns="http://www.w3.org/2000/svg"
>
<g
filter="url(#filter0_dd_304_317945)"
>
<g
clip-path="url(#clip0_304_317945)"
>
<rect
fill="#288041"
height="40"
rx="8"
width="40"
x="6"
y="2"
/>
<g
clip-path="url(#clip1_304_317945)"
>
<rect
fill="#215D31"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
<rect
fill="#93D4A5"
height="20.1485"
transform="rotate(45 20.6104 20.1591)"
width="20.1485"
x="20.6104"
y="20.1591"
/>
<rect
fill="#93D4A5"
height="20.1485"
transform="rotate(45 30.9502 16.59)"
width="20.1485"
x="30.9502"
y="16.59"
/>
<circle
cx="20.435"
cy="16.2246"
fill="#93D4A5"
r="2.45455"
/>
</g>
<rect
fill="#67B47C"
height="32.25"
transform="rotate(45 7.05469 3)"
width="53.75"
x="7.05469"
y="3"
/>
<g
clip-path="url(#clip2_304_317945)"
>
<g
clip-path="url(#clip3_304_317945)"
>
<rect
fill="#2B733F"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
<rect
fill="#A9E0B8"
height="20.1485"
transform="rotate(45 21.3604 21.6592)"
width="20.1485"
x="21.3604"
y="21.6592"
/>
<rect
fill="#A9E0B8"
height="20.1485"
transform="rotate(45 32.2012 18.5908)"
width="20.1485"
x="32.2012"
y="18.5908"
/>
<circle
cx="21.685"
cy="17.9746"
fill="#A9E0B8"
r="2.45455"
/>
</g>
</g>
</g>
</g>
<defs>
<filter
color-interpolation-filters="sRGB"
filterUnits="userSpaceOnUse"
height="53"
id="filter0_dd_304_317945"
width="52"
x="0"
y="0"
>
<feflood
flood-opacity="0"
result="BackgroundImageFix"
/>
<fecolormatrix
in="SourceAlpha"
result="hardAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feoffset
dy="5"
/>
<fegaussianblur
stdDeviation="3"
/>
<fecomposite
in2="hardAlpha"
operator="out"
/>
<fecolormatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"
/>
<feblend
in2="BackgroundImageFix"
mode="normal"
result="effect1_dropShadow_304_317945"
/>
<fecolormatrix
in="SourceAlpha"
result="hardAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feoffset
dy="1"
/>
<fegaussianblur
stdDeviation="1.5"
/>
<fecomposite
in2="hardAlpha"
operator="out"
/>
<fecolormatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
/>
<feblend
in2="effect1_dropShadow_304_317945"
mode="normal"
result="effect2_dropShadow_304_317945"
/>
<feblend
in="SourceGraphic"
in2="effect2_dropShadow_304_317945"
mode="normal"
result="shape"
/>
</filter>
<clippath
id="clip0_304_317945"
>
<rect
fill="white"
height="40"
rx="8"
width="40"
x="6"
y="2"
/>
</clippath>
<clippath
id="clip1_304_317945"
>
<rect
fill="white"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
</clippath>
<clippath
id="clip2_304_317945"
>
<rect
fill="white"
height="29.9046"
transform="translate(7.20801 3.17212) rotate(45)"
width="60.7428"
/>
</clippath>
<clippath
id="clip3_304_317945"
>
<rect
fill="white"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
</clippath>
</defs>
</svg>
<h1
class="css-rpn2xa"
>
Visual tests
</h1>
<p
class="css-lpn1mp"
>
Catch bugs in UI appearance automatically. Compare image snapshots to detect visual changes.
</p>
</div>
<button
class="css-h1l3p1"
>
Let's do it!
</button>
</div>
</div>
</div>
Ignored nodes: comments, script, style
<div
class="css-tb8xck"
data-canvas="right"
orientation="right"
>
<div
class="css-pmpiqi"
>
<div
class="css-1pjqexw"
>
<div>
<svg
fill="none"
height="53"
viewBox="0 0 52 53"
width="52"
xmlns="http://www.w3.org/2000/svg"
>
<g
filter="url(#filter0_dd_304_317945)"
>
<g
clip-path="url(#clip0_304_317945)"
>
<rect
fill="#288041"
height="40"
rx="8"
width="40"
x="6"
y="2"
/>
<g
clip-path="url(#clip1_304_317945)"
>
<rect
fill="#215D31"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
<rect
fill="#93D4A5"
height="20.1485"
transform="rotate(45 20.6104 20.1591)"
width="20.1485"
x="20.6104"
y="20.1591"
/>
<rect
fill="#93D4A5"
height="20.1485"
transform="rotate(45 30.9502 16.59)"
width="20.1485"
x="30.9502"
y="16.59"
/>
<circle
cx="20.435"
cy="16.2246"
fill="#93D4A5"
r="2.45455"
/>
</g>
<rect
fill="#67B47C"
height="32.25"
transform="rotate(45 7.05469 3)"
width="53.75"
x="7.05469"
y="3"
/>
<g
clip-path="url(#clip2_304_317945)"
>
<g
clip-path="url(#clip3_304_317945)"
>
<rect
fill="#2B733F"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
<rect
fill="#A9E0B8"
height="20.1485"
transform="rotate(45 21.3604 21.6592)"
width="20.1485"
x="21.3604"
y="21.6592"
/>
<rect
fill="#A9E0B8"
height="20.1485"
transform="rotate(45 32.2012 18.5908)"
width="20.1485"
x="32.2012"
y="18.5908"
/>
<circle
cx="21.685"
cy="17.9746"
fill="#A9E0B8"
r="2.45455"
/>
</g>
</g>
</g>
</g>
<defs>
<filter
color-interpolation-filters="sRGB"
filterUnits="userSpaceOnUse"
height="53"
id="filter0_dd_304_317945"
width="52"
x="0"
y="0"
>
<feflood
flood-opacity="0"
result="BackgroundImageFix"
/>
<fecolormatrix
in="SourceAlpha"
result="hardAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feoffset
dy="5"
/>
<fegaussianblur
stdDeviation="3"
/>
<fecomposite
in2="hardAlpha"
operator="out"
/>
<fecolormatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"
/>
<feblend
in2="BackgroundImageFix"
mode="normal"
result="effect1_dropShadow_304_317945"
/>
<fecolormatrix
in="SourceAlpha"
result="hardAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feoffset
dy="1"
/>
<fegaussianblur
stdDeviation="1.5"
/>
<fecomposite
in2="hardAlpha"
operator="out"
/>
<fecolormatrix
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
/>
<feblend
in2="effect1_dropShadow_304_317945"
mode="normal"
result="effect2_dropShadow_304_317945"
/>
<feblend
in="SourceGraphic"
in2="effect2_dropShadow_304_317945"
mode="normal"
result="shape"
/>
</filter>
<clippath
id="clip0_304_317945"
>
<rect
fill="white"
height="40"
rx="8"
width="40"
x="6"
y="2"
/>
</clippath>
<clippath
id="clip1_304_317945"
>
<rect
fill="white"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
</clippath>
<clippath
id="clip2_304_317945"
>
<rect
fill="white"
height="29.9046"
transform="translate(7.20801 3.17212) rotate(45)"
width="60.7428"
/>
</clippath>
<clippath
id="clip3_304_317945"
>
<rect
fill="white"
height="22.5"
rx="2"
width="22.5"
x="14.75"
y="10.75"
/>
</clippath>
</defs>
</svg>
<h1
class="css-rpn2xa"
>
Visual tests
</h1>
<p
class="css-lpn1mp"
>
Catch bugs in UI appearance automatically. Compare image snapshots to detect visual changes.
</p>
</div>
<button
class="css-h1l3p1"
>
Let's do it!
</button>
</div>
</div>
</div>View in StorybookChrome 105880x640
Linux Linux Ubuntu 20.04.4
28a25b on norbert/upgrade-storybook-to-latest-patch
Caught exception in
play functionThis story threw an error after it finished rendering which means interactions may not have been executed fully.
Error: ignoredException
at https://6480e1b0042842f149cfd74c-irsknsluyd.capture-loopback.chromatic.com/sb-preview/runtime.js:4:93306