test(a11y): fix flaky accessibility integration tests

integration/page_objects/common.ts

@@ -19,6 +19,7 @@
 
 import Url from 'url';
 
+import { JSDOM } from 'jsdom';
 import { AXNode } from 'puppeteer';
 
 import { DRAG_DETECTION_TIMEOUT } from '../../src/state/reducers/interactions';
@@ -472,10 +473,10 @@ class CommonPage {
    * Get HTML for element to test aria labels etc
    */
   // eslint-disable-next-line class-methods-use-this
-  async getElementHTML(url: string) {
+  async getSelectorHTML(url: string, tagName: string) {
     await this.loadElementFromURL(url, '.echCanvasRenderer');
-    // https://github.com/puppeteer/puppeteer/issues/406#issuecomment-323555639
-    return await page.evaluate(() => new XMLSerializer().serializeToString(document));
+    const xml = await page.evaluate(() => new XMLSerializer().serializeToString(document));
+    return new JSDOM(xml, { contentType: 'text/xml' }).window.document.getElementsByTagName(tagName);
   }
 }
 

integration/tests/accessibility.test.ts

@@ -21,15 +21,17 @@ import { common } from '../page_objects/common';
 
 describe('Accessibility', () => {
   it('should include the series types if one type of series', async () => {
-    const html = await common.getElementHTML(
+    const html = await common.getSelectorHTML(
       'http://localhost:9001/iframe.html?id=annotations-lines--x-continuous-domain',
+      'dd',
     );
-    const startIndex = html.indexOf('<dd>');
-    expect(html.slice(startIndex, startIndex + 13)).toBe('<dd>bar chart');
+    expect(html[0].innerHTML).toBe('bar chart');
   });
   it('should include the series types if multiple types of series', async () => {
-    const html = await common.getElementHTML('http://localhost:9001/iframe.html?id=mixed-charts--bars-and-lines');
-    const startIndex = html.indexOf('<dd>');
-    expect(html.slice(startIndex, startIndex + 30)).toBe('<dd>Mixed chart: bar and line ');
+    const html = await common.getSelectorHTML(
+      'http://localhost:9001/iframe.html?id=mixed-charts--bars-and-lines',
+      'dd',
+    );
+    expect(html[0].innerHTML).toBe('Mixed chart: bar and line chart');
   });
 });