test(accessibility): remove and update tests for new chromium (#6372)

Author: JoelEinbinder

tests/config/android.config.ts

@@ -51,7 +51,7 @@ class AndroidPageEnv extends AndroidEnv {
   async beforeEach(args: any, testInfo: folio.TestInfo) {
     const result = await super.beforeEach(args, testInfo);
     const page = await this._context!.newPage();
-    return { ...result, browserVersion: this._browserVersion, page };
+    return { ...result, browserVersion: this._browserVersion, browserMajorVersion: this._browserMajorVersion, page };
   }
 
   async afterEach({}, testInfo: folio.TestInfo) {

tests/config/androidTest.ts

@@ -26,6 +26,7 @@ type AndroidTestArgs = {
 export class AndroidEnv {
   protected _device?: AndroidDevice;
   protected _browserVersion: string;
+  protected _browserMajorVersion: number;
 
   async beforeAll(args: CommonWorkerArgs, workerInfo: folio.WorkerInfo) {
     this._device = (await args.playwright._android.devices())[0];
@@ -37,6 +38,7 @@ export class AndroidEnv {
         .find(line => line.includes('versionName='))
         .trim()
         .split('=')[1];
+    this._browserMajorVersion = Number(this._browserVersion.split('.')[0]);
     this._device.setDefaultTimeout(90000);
   }
 

tests/config/default.config.ts

@@ -56,6 +56,7 @@ type AllOptions = WorkerOptionsFor<typeof contextTest>;
 class PageEnv {
   private _browser: Browser
   private _browserVersion: string;
+  private _browserMajorVersion: number;
   private _context: BrowserContext | undefined;
 
   async beforeAll(args: AllOptions & CommonWorkerArgs, workerInfo: folio.WorkerInfo) {
@@ -67,6 +68,7 @@ class PageEnv {
       handleSIGINT: false,
     } as any);
     this._browserVersion = this._browser.version();
+    this._browserMajorVersion = Number(this._browserVersion.split('.')[0]);
     return {};
   }
 
@@ -77,7 +79,7 @@ class PageEnv {
       ...args.contextOptions,
     });
     const page = await this._context.newPage();
-    return { context: this._context, page, browserVersion: this._browserVersion };
+    return { context: this._context, page, browserVersion: this._browserVersion, browserMajorVersion: this._browserMajorVersion };
   }
 
   async afterEach({}) {

tests/config/electron.config.ts

@@ -46,6 +46,7 @@ class ElectronPageEnv extends ElectronEnv {
     return {
       ...result,
       browserVersion: this._browserVersion,
+      browserMajorVersion: this._browserMajorVersion,
       page,
     };
   }

tests/config/electronTest.ts

@@ -29,6 +29,7 @@ export class ElectronEnv {
   private _electronApp: ElectronApplication | undefined;
   private _windows: Page[] = [];
   protected _browserVersion: string;
+  protected _browserMajorVersion: number;
 
   private async _newWindow() {
     const [ window ] = await Promise.all([
@@ -52,6 +53,7 @@ export class ElectronEnv {
     // This env prevents 'Electron Security Policy' console message.
     process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';
     this._browserVersion = require('electron/package.json').version;
+    this._browserMajorVersion = Number(this._browserVersion.split('.')[0]);
     return {};
   }
 

tests/config/pageTest.ts

@@ -21,6 +21,7 @@ export { expect } from 'folio';
 // Page test does not guarantee an isolated context, just a new page (because Android).
 export type PageTestArgs = {
   browserVersion: string;
+  browserMajorVersion: number;
   page: Page;
 };
 

tests/interception.spec.ts

@@ -156,8 +156,8 @@ it('should work with regular expression passed from a different context', async
   expect(intercepted).toBe(true);
 });
 
-it('should not break remote worker importScripts', async ({ page, server, isChromium, browserVersion }) => {
-  it.fixme(isChromium && +browserVersion.split('.')[0] < 91);
+it('should not break remote worker importScripts', async ({ page, server, isChromium, browserMajorVersion }) => {
+  it.fixme(isChromium && browserMajorVersion < 91);
 
   await page.route('**', async route => {
     await route.continue();

tests/page-accessibility.spec.ts

@@ -172,8 +172,8 @@ it('rich text editable fields should have children', async function({page, isFir
   expect(snapshot.children[0]).toEqual(golden);
 });
 
-it('rich text editable fields with role should have children', async function({page, isFirefox, browserName}) {
-  it.skip(browserName === 'webkit', 'WebKit rich text accessibility is iffy');
+it('rich text editable fields with role should have children', async function({page, isFirefox, isWebKit, isChromium, browserMajorVersion}) {
+  it.skip(isWebKit, 'WebKit rich text accessibility is iffy');
 
   await page.setContent(`
   <div contenteditable="true" role='textbox'>
@@ -190,6 +190,7 @@ it('rich text editable fields with role should have children', async function({p
   } : {
     role: 'textbox',
     name: '',
+    multiline: (isChromium && browserMajorVersion >= 92) ? true : undefined,
     value: 'Edit this image: ',
     children: [{
       role: 'text',
@@ -203,44 +204,6 @@ it('rich text editable fields with role should have children', async function({p
   expect(snapshot.children[0]).toEqual(golden);
 });
 
-it.describe('contenteditable', () => {
-  it.beforeEach(async ({browserName}) => {
-    it.skip(browserName === 'firefox', 'Firefox does not support contenteditable="plaintext-only"');
-    it.skip(browserName === 'webkit', 'WebKit rich text accessibility is iffy');
-  });
-
-  it('plain text field with role should not have children', async function({page}) {
-    await page.setContent(`
-      <div contenteditable="plaintext-only" role='textbox'>Edit this image:<img src="fakeimage.png" alt="my fake image"></div>`);
-    const snapshot = await page.accessibility.snapshot();
-    expect(snapshot.children[0]).toEqual({
-      role: 'textbox',
-      name: '',
-      value: 'Edit this image:'
-    });
-  });
-
-  it('plain text field without role should not have content', async function({page}) {
-    await page.setContent(`
-    <div contenteditable="plaintext-only">Edit this image:<img src="fakeimage.png" alt="my fake image"></div>`);
-    const snapshot = await page.accessibility.snapshot();
-    expect(snapshot.children[0]).toEqual({
-      role: 'generic',
-      name: ''
-    });
-  });
-
-  it('plain text field with tabindex and without role should not have content', async function({page}) {
-    await page.setContent(`
-    <div contenteditable="plaintext-only" tabIndex=0>Edit this image:<img src="fakeimage.png" alt="my fake image"></div>`);
-    const snapshot = await page.accessibility.snapshot();
-    expect(snapshot.children[0]).toEqual({
-      role: 'generic',
-      name: ''
-    });
-  });
-});
-
 it('non editable textbox with role and tabIndex and label should not have children', async function({page, isChromium, isFirefox}) {
   await page.setContent(`
   <div role="textbox" tabIndex=0 aria-checked="true" aria-label="my favorite textbox">

tests/selectors-misc.spec.ts

@@ -27,8 +27,8 @@ it('should work for open shadow roots', async ({page, server}) => {
   expect(await page.$$(`data-testid:light=foo`)).toEqual([]);
 });
 
-it('should click on links in shadow dom', async ({page, server, browserName, browserVersion, isElectron, isAndroid}) => {
-  it.fixme(browserName === 'chromium' && Number(browserVersion.split('.')[0]) < 91, 'Remove when crrev.com/864024 gets to the stable channel');
+it('should click on links in shadow dom', async ({page, server, browserName, browserMajorVersion, isElectron, isAndroid}) => {
+  it.fixme(browserName === 'chromium' && browserMajorVersion < 91, 'Remove when crrev.com/864024 gets to the stable channel');
   it.fixme(isAndroid);
   it.fixme(isElectron);