fix(webdriverjs): Recursively find <frame> (#209)

Co-authored-by: Michael <45568605+michael-siek@users.noreply.github.com> Co-authored-by: Dylan Barrell <dylan@barrell.com>
dequelabs · Apr 12, 2021 · 0d20e1f · 0d20e1f
1 parent 9373360
commit 0d20e1f
Show file tree

Hide file tree

Showing 15 changed files with 113 additions and 60 deletions.
diff --git a/packages/webdriverjs/src/axe-injector.ts b/packages/webdriverjs/src/axe-injector.ts
@@ -139,7 +139,9 @@ export default class AxeInjector {
 
     await this.driver.executeScript(this.script);
 
-    const frames = await this.driver.findElements({ tagName: 'iframe' });
+    const ifs = await this.driver.findElements({ tagName: 'iframe' });
+    const fs = await this.driver.findElements({ tagName: 'frame' });
+    const frames = ifs.concat(fs);
 
     for (const childFrames of frames) {
       framePath.push(childFrames);
@@ -171,8 +173,10 @@ export default class AxeInjector {
     // XXX: if this `executeScript` fails, we *want* to error, as we cannot run axe-core.
     await this.driver.executeScript(this.script);
 
-    // Get all of <iframe>s at this level
-    const frames = await this.driver.findElements({ tagName: 'iframe' });
+    // Get all of <iframe>s and <frame>s at this level
+    const ifs = await this.driver.findElements({ tagName: 'iframe' });
+    const fs = await this.driver.findElements({ tagName: 'frame' });
+    const frames = ifs.concat(fs);
 
     // Inject the script into all child frames. Handle errors to ensure we don't stop execution if we fail to inject.
     for (const childFrame of frames) {

diff --git a/packages/webdriverjs/src/test/fixtures/frames/bar.html b/packages/webdriverjs/src/test/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/webdriverjs/src/test/fixtures/frames/foo.html b/packages/webdriverjs/src/test/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/webdriverjs/src/test/fixtures/frames/recursive.html b/packages/webdriverjs/src/test/fixtures/frames/recursive.html
diff --git a/packages/webdriverjs/src/test/fixtures/iframes/bar.html b/packages/webdriverjs/src/test/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/webdriverjs/src/test/fixtures/iframes/baz.html b/packages/webdriverjs/src/test/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/webdriverjs/src/test/fixtures/iframes/foo.html b/packages/webdriverjs/src/test/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/webdriverjs/src/test/fixtures/inner-configure-frame.html b/packages/webdriverjs/src/test/fixtures/inner-configure-frame.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html lang="bob">
+  <head>
+    <title>Hello</title>
+  </head>
+</html>
diff --git a/packages/webdriverjs/src/test/fixtures/multiple-frames.html b/packages/webdriverjs/src/test/fixtures/multiple-frames.html
diff --git a/packages/webdriverjs/src/test/fixtures/nested-frames.html b/packages/webdriverjs/src/test/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/webdriverjs/src/test/fixtures/nested-iframes.html b/packages/webdriverjs/src/test/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/webdriverjs/src/test/fixtures/outer-configure-frame.html b/packages/webdriverjs/src/test/fixtures/outer-configure-frame.html
@@ -3,7 +3,7 @@
   <head>
     <title>Configure Frame Test</title>
   </head>
-  <body>
-    <iframe src="inner-configure-frame.html" title="Test inner frame"></iframe>
-  </body>
+  <frameset>
+    <frame src="inner-configure-frame.html" title="Test inner frame">
+  </frameset>
 </html>
diff --git a/packages/webdriverjs/src/test/fixtures/outer-configure-iframe.html b/packages/webdriverjs/src/test/fixtures/outer-configure-iframe.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="FFFF">
+  <head>
+    <title>Configure Frame Test</title>
+  </head>
+  <body>
+    <iframe src="inner-configure-frame.html" title="Test inner frame"></iframe>
+  </body>
+</html>
diff --git a/packages/webdriverjs/src/test/fixtures/recursive-frames.html b/packages/webdriverjs/src/test/fixtures/recursive-frames.html
diff --git a/packages/webdriverjs/src/test/test.ts b/packages/webdriverjs/src/test/test.ts
@@ -83,6 +83,26 @@ describe('@axe-core/webdriverjs', () => {
   });
 
   describe('configure', () => {
+    it('should find configured violations in all iframes', async () => {
+      await driver.get(`${addr}/outer-configure-iframe.html`);
+      const results = await new AxeBuilder(driver)
+        .options({
+          rules: {
+            'landmark-one-main': { enabled: false },
+            'page-has-heading-one': { enabled: false },
+            region: { enabled: false },
+            'html-lang-valid': { enabled: false },
+            bypass: { enabled: false }
+          }
+        })
+        .configure(json)
+        .analyze();
+
+      assert.equal(results.violations[0].id, 'dylang');
+      // the second violation is in a iframe
+      assert.equal(results.violations[0].nodes.length, 2);
+    });
+
     it('should find configured violations in all frames', async () => {
       await driver.get(`${addr}/outer-configure-frame.html`);
       const results = await new AxeBuilder(driver)
@@ -135,16 +155,32 @@ describe('@axe-core/webdriverjs', () => {
   });
 
   describe('iframe tests', () => {
+    it('injects into nested iframes', async () => {
+      await driver.get(`${addr}/nested-iframes.html`);
+      const executeSpy = sinon.spy(driver, 'executeScript');
+      await new AxeBuilder(driver).analyze();
+      /**
+       * Ensure we called execute 4 times
+       * 1. nested-iframes.html
+       * 2. iframes/foo.html
+       * 3. iframes/bar.html
+       * 4. iframes/baz.html
+       */
+      assert.strictEqual(executeSpy.callCount, 4);
+    });
+  });
+
+  describe('frame tests', () => {
     it('injects into nested frames', async () => {
       await driver.get(`${addr}/nested-frames.html`);
       const executeSpy = sinon.spy(driver, 'executeScript');
       await new AxeBuilder(driver).analyze();
       /**
        * Ensure we called execute 4 times
        * 1. nested-frames.html
-       * 2. foo.html
-       * 3. bar.html
-       * 4. baz.html
+       * 2. frames/foo.html
+       * 3. frames/bar.html
+       * 4. frames/baz.html
        */
       assert.strictEqual(executeSpy.callCount, 4);
     });