fix(stabilization): wait for aria-busy on svg elements

argos-ci · Dec 21, 2023 · 96e69da · 96e69da
1 parent ba44d1e
commit 96e69da
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 10 deletions.
diff --git a/packages/browser/src/stabilization.ts b/packages/browser/src/stabilization.ts
@@ -225,17 +225,20 @@ export function waitForImagesToLoad(document: Document) {
  * Wait for all [aria-busy="true"] elements to invisible.
  */
 export function waitForNoBusy(document: Document) {
- const checkIsVisible = (element: HTMLElement) =>
- Boolean(
- element.offsetWidth ||
- element.offsetHeight ||
- element.getClientRects().length,
- );
+ const checkIsVisible = (element: Element) => {
+ // Basic check for HTMLElement
+ if (
+ element instanceof HTMLElement &&
+ (element.offsetHeight !== 0 || element.offsetWidth !== 0)
+ ) {
+ return true;
+ }
+ // Check for HTMLElement & SVGElement
+ return element.getClientRects().length > 0;
+ };
 
  const elements = Array.from(document.querySelectorAll('[aria-busy="true"]'));
- return elements.every((element) => {
- return !(element instanceof HTMLElement) || !checkIsVisible(element);
- });
+ return elements.every((element) => !checkIsVisible(element));
 }
 
 /**

diff --git a/packages/playwright/fixtures/dummy.html b/packages/playwright/fixtures/dummy.html
@@ -47,6 +47,10 @@
  .__argos__ h1 {
  font-variant: small-caps;
  }
+
+ .blue-fill circle {
+ fill: blue;
+ }
  </style>
  </head>
  <body>
@@ -69,12 +73,20 @@ <h3>Hidden</h3>
  </div>
  </div>
 
- <h3>Loader (300ms)</h3>
+ <h3>aria-busy (HTMLElement) (300ms)</h3>
  <div class="hint">Hint: the following div should be empty.</div>
  <div id="loader-container" class="field">
  <div id="loader" aria-busy="true"></div>
  </div>
 
+ <h3>aria-busy (SVGElement) (300ms)</h3>
+ <div class="hint">Hint: the following square should be blue.</div>
+ <div>
+ <svg id="svg-loader" height="10" width="10" aria-busy="true">
+ <circle cx="5" cy="5" r="40" fill="red" />
+ </svg>
+ </div>
+
  <h3>Red square</h3>
  <div
  class="red-square"
@@ -115,6 +127,12 @@ <h3>Paragraph</h3>
  document.querySelector("#loader").remove();
  }, 300);
 
+ setTimeout(() => {
+ const svg = document.querySelector("#svg-loader");
+ svg.classList.add("blue-fill");
+ svg.removeAttribute("aria-busy");
+ }, 300);
+
  setTimeout(() => {
  const url =
  "https://fonts.googleapis.com/css2?family=Cantarell&family=Tangerine&display=swap";