fix(webdriverio): Recursively find <frame> (#238)

Co-authored-by: Michael <45568605+michael-siek@users.noreply.github.com> Co-authored-by: Dylan Barrell <dylan@barrell.com>
dequelabs · May 5, 2021 · 7e6a80d · 7e6a80d
1 parent 753a919
commit 7e6a80d
Show file tree

Hide file tree

Showing 13 changed files with 140 additions and 31 deletions.
diff --git a/packages/webdriverio/fixtures/frames/bar.html b/packages/webdriverio/fixtures/frames/bar.html
@@ -3,8 +3,7 @@
   <head>
     <title>Bar</title>
   </head>
-  <body>
-    <h1>Bar</h1>
-    <iframe src="/frames/baz.html"></iframe>
-  </body>
+  <frameset>
+    <frame src="/frames/baz.html">
+  </frameset>
 </html>
diff --git a/packages/webdriverio/fixtures/frames/foo.html b/packages/webdriverio/fixtures/frames/foo.html
@@ -3,8 +3,7 @@
   <head>
     <title>Foo</title>
   </head>
-  <body>
-    <h1>Foo</h1>
-    <iframe src="/frames/bar.html"></iframe>
-  </body>
+  <frameset>
+    <frame src="/frames/bar.html">
+  </frameset>
 </html>
diff --git a/packages/webdriverio/fixtures/frames/recursive.html b/packages/webdriverio/fixtures/frames/recursive.html
@@ -3,8 +3,7 @@
   <head>
     <title>Recursive</title>
   </head>
-  <body>
-    <h1>Recursive</h1>
-    <iframe src="/frames/recursive.html"></iframe>
-  </body>
+  <frameset>
+    <frame src="/frames/recursive.html">
+  </frameset>
 </html>
diff --git a/packages/webdriverio/fixtures/iframes/bar.html b/packages/webdriverio/fixtures/iframes/bar.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Bar</title>
+  </head>
+  <body>
+    <h1>Bar</h1>
+    <iframe src="/iframes/baz.html"></iframe>
+  </body>
+</html>
diff --git a/packages/webdriverio/fixtures/iframes/baz.html b/packages/webdriverio/fixtures/iframes/baz.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Baz</title>
+  </head>
+  <body>
+    <h1>Baz</h1>
+  </body>
+</html>
diff --git a/packages/webdriverio/fixtures/iframes/foo.html b/packages/webdriverio/fixtures/iframes/foo.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Foo</title>
+  </head>
+  <body>
+    <h1>Foo</h1>
+    <iframe src="/iframes/bar.html"></iframe>
+  </body>
+</html>
diff --git a/packages/webdriverio/fixtures/iframes/recursive.html b/packages/webdriverio/fixtures/iframes/recursive.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Recursive</title>
+  </head>
+  <body>
+    <h1>Recursive</h1>
+    <iframe src="/iframes/recursive.html"></iframe>
+  </body>
+</html>
diff --git a/packages/webdriverio/fixtures/nested-frames.html b/packages/webdriverio/fixtures/nested-frames.html
@@ -3,9 +3,7 @@
   <head>
     <title>Nested Frames</title>
   </head>
-  <body>
-    <h1>This page has nested frames!</h1>
-    <br /><br /><br />
-    <iframe src="/frames/foo.html"></iframe>
-  </body>
+  <frameset>
+    <frame src="/frames/foo.html">
+  </frameset>
 </html>
diff --git a/packages/webdriverio/fixtures/nested-iframes.html b/packages/webdriverio/fixtures/nested-iframes.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Nested Frames</title>
+  </head>
+  <body>
+    <h1>This page has nested frames!</h1>
+    <br /><br /><br />
+    <iframe src="/iframes/foo.html"></iframe>
+  </body>
+</html>
diff --git a/packages/webdriverio/fixtures/recursive-frames.html b/packages/webdriverio/fixtures/recursive-frames.html
@@ -3,10 +3,8 @@
   <head>
     <title>Recursive Frames</title>
   </head>
-  <body>
-    <h1>This page has a weird recursive frams!</h1>
-    <br /><br /><br />
-    <iframe src="/frames/baz.html"></iframe>
-    <iframe src="/frames/recursive.html"></iframe>
-  </body>
+  <frameset>
+    <frame src="/frames/baz.html">
+    <frame src="/frames/recursive.html">
+  </frameset>
 </html>
diff --git a/packages/webdriverio/fixtures/recursive-iframes.html b/packages/webdriverio/fixtures/recursive-iframes.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Recursive Frames</title>
+  </head>
+  <body>
+    <h1>This page has a weird recursive frams!</h1>
+    <br /><br /><br />
+    <iframe src="/iframes/baz.html"></iframe>
+    <iframe src="/iframes/recursive.html"></iframe>
+  </body>
+</html>
diff --git a/packages/webdriverio/src/index.ts b/packages/webdriverio/src/index.ts
@@ -196,7 +196,12 @@ export default class AxeBuilder {
     await this.setBrowsingContext(browsingContext);
     await this.client.execute(this.script);
 
-    const iframes = (await this.client.$$(this.iframeSelector())) || [];
+    const frames =
+      (await this.client.$$(this.frameSelector())) ||
+      /* istanbul ignore next */ [];
+    const iframes =
+      frames.concat(await this.client.$$(this.iframeSelector())) ||
+      /* istanbul ignore next */ [];
     if (!iframes.length) {
       return;
     }
@@ -218,7 +223,7 @@ export default class AxeBuilder {
   }
 
   /**
-   * Get a CSS selector for retrieving child frames.
+   * Get a CSS selector for retrieving child iframes.
    * @returns {String}
    */
 
@@ -230,6 +235,19 @@ export default class AxeBuilder {
     return selector;
   }
 
+  /**
+   * Get a CSS selector for retrieving child frames.
+   * @returns {String}
+   */
+
+     private frameSelector(): string {
+      let selector = 'frame';
+      for (const disableFrameSelector of this.disableFrameSelectors) {
+        selector += `:not(${disableFrameSelector})`;
+      }
+      return selector;
+    }
+
   /**
    * Set browsing context - when `null` sets top level page as context
    * - https://webdriver.io/docs/api/webdriver.html#switchtoframe

diff --git a/packages/webdriverio/src/test.ts b/packages/webdriverio/src/test.ts
@@ -120,6 +120,26 @@ describe('@axe-core/webdriverio', () => {
         });
       });
 
+      describe('disableIframe', () => {
+        it('does not inject into disabled iframes', async () => {
+          await client.url(`${addr}/recursive-iframes.html`);
+          const executeSpy = sinon.spy(client, 'execute');
+          await new AxeBuilder({ client })
+            .disableFrame('[src*="recursive.html"]')
+            .analyze();
+          assert.strictEqual(executeSpy.callCount, 2);
+        });
+
+        it('does not error when disabled iframe does not exist', async () => {
+          await client.url(`${addr}/recursive-iframes.html`);
+          const executeSpy = sinon.spy(client, 'execute');
+          await new AxeBuilder({ client })
+            .disableFrame('[src*="does-not-exist.html"]')
+            .analyze();
+          assert.strictEqual(executeSpy.callCount, 5);
+        });
+      });
+
       describe('disableFrame', () => {
         it('does not inject into disabled frames', async () => {
           await client.url(`${addr}/recursive-frames.html`);
@@ -171,16 +191,16 @@ describe('@axe-core/webdriverio', () => {
       });
 
       describe('iframe tests', () => {
-        it('injects into nested frames', async () => {
-          await client.url(`${addr}/nested-frames.html`);
+        it('injects into nested iframes', async () => {
+          await client.url(`${addr}/nested-iframes.html`);
           const executeSpy = sinon.spy(client, 'execute');
           await new AxeBuilder({ client }).analyze();
           /**
            * Ensure we called execute 4 times
-           * 1. nested-frames.html
-           * 2. foo.html
-           * 3. bar.html
-           * 4. baz.html
+           * 1. nested-iframes.html
+           * 2. iframes/foo.html
+           * 3. iframes/bar.html
+           * 4. iframes/baz.html
            */
           assert.strictEqual(executeSpy.callCount, 4);
         });
@@ -192,6 +212,22 @@ describe('@axe-core/webdriverio', () => {
         });
       });
 
+      describe('frame tests', () => {
+        it('injects into nested frames', async () => {
+          await client.url(`${addr}/nested-frames.html`);
+          const executeSpy = sinon.spy(client, 'execute');
+          await new AxeBuilder({ client }).analyze();
+          /**
+           * Ensure we called execute 4 times
+           * 1. nested-frames.html
+           * 2. frames/foo.html
+           * 3. frames/bar.html
+           * 4. frames/baz.html
+           */
+          assert.strictEqual(executeSpy.callCount, 4);
+        });
+      });
+
       describe('logOrRethrowError', () => {
         it('log a StaleElementReference Error with `seleniumStack`', () => {
           const error = {