chore(deps): update to electron 10.1.5

package.json

@@ -144,7 +144,7 @@
         "serve-static": "^1.13.2",
         "simple-git": "^2.21.0",
         "source-map-loader": "^1.1.2",
-        "spectron": "^10.0.1",
+        "spectron": "^12.0.0",
         "terser-webpack-plugin": "^4.2.3",
         "ts-jest": "^26.4.3",
         "ts-loader": "^8.0.7",
@@ -163,7 +163,7 @@
         "axe-core": "4.0.2",
         "axios": "^0.21.0",
         "classnames": "^2.2.6",
-        "electron": "8.4.1",
+        "electron": "10.1.5",
         "electron-log": "^4.3.0",
         "electron-updater": "^4.3.5",
         "idb-keyval": "^3.2.0",

pipeline/scripts/download-electron-mirror.js

@@ -27,7 +27,7 @@ if (
     process.exit(1);
 }
 
-const assetNumber = '5424028';
+const assetNumber = '6179765';
 
 const downloadMirrors = async () => {
     await downloadElectronArtifact('electron', 'node_modules/electron/dist');

src/electron/main/main.ts

@@ -37,7 +37,8 @@ const electronAutoUpdateCheck = new AutoUpdaterClient(autoUpdater);
 const createWindow = () => {
     mainWindow = new BrowserWindow({
         show: false,
-        webPreferences: { nodeIntegration: true },
+        // enableRemoteModule required for spectron (https://github.com/electron-userland/spectron/issues/693#issuecomment-696957538)
+        webPreferences: { nodeIntegration: true, enableRemoteModule: true },
         titleBarStyle: 'hidden',
         width: mainWindowConfig.defaultWidth,
         height: mainWindowConfig.defaultHeight,

src/tests/electron/common/create-application.ts

@@ -57,7 +57,9 @@ export async function createAppController(
             operationLabel: 'app.start',
             warnOnRetry: true,
             maxRetries: DEFAULT_CHROMEDRIVER_START_RETRIES,
-            retryOnlyIfMatches: err => err?.message?.includes('ChromeDriver did not start within'),
+            retryOnlyIfMatches: err =>
+                err?.message?.includes('ChromeDriver did not start within') ||
+                err?.message?.includes('Failed to create session.\nread ECONNRESET'),
         },
     );
 

src/tests/electron/common/scan-for-accessibility-issues.ts

@@ -39,7 +39,7 @@ async function runAxeScan(
         },
     };
 
-    const executeOutput = await spectronClient.executeAsync(
+    const axeResults = await spectronClient.executeAsync(
         (options, selectorInEvaluate, done) => {
             const elementContext =
                 selectorInEvaluate === null ? document : { include: [selectorInEvaluate] };
@@ -55,11 +55,6 @@ async function runAxeScan(
         selector,
     );
 
-    // This is how webdriverio indicates success
-    expect(executeOutput).toHaveProperty('status', 0);
-
-    const axeResults = executeOutput.value;
-
     return prettyPrintAxeViolations(axeResults);
 }
 

src/tests/electron/common/view-controllers/app-controller.ts

@@ -4,15 +4,18 @@ import { AndroidSetupStepId } from 'electron/platform/android/setup/android-setu
 import { Application } from 'spectron';
 import { AndroidSetupViewController } from 'tests/electron/common/view-controllers/android-setup-view-controller';
 import { DeviceConnectionDialogController } from 'tests/electron/common/view-controllers/device-connection-dialog-controller';
-import { SpectronAsyncClient } from 'tests/electron/common/view-controllers/spectron-async-client';
+import {
+    getSpectronAsyncClient,
+    SpectronAsyncClient,
+} from 'tests/electron/common/view-controllers/spectron-async-client';
 import { DEFAULT_WAIT_FOR_ELEMENT_TO_BE_VISIBLE_TIMEOUT_MS } from 'tests/electron/setup/timeouts';
 import { AutomatedChecksViewController } from './automated-checks-view-controller';
 
 export class AppController {
     public client: SpectronAsyncClient;
 
     constructor(public app: Application) {
-        this.client = app.client as any;
+        this.client = getSpectronAsyncClient(app.client, app.browserWindow);
     }
 
     public async stop(): Promise<void> {
@@ -28,8 +31,10 @@ export class AppController {
                 const title = await this.app.webContents.getTitle();
                 return title === expectedTitle;
             },
-            timeout,
-            `was expecting window title to transition to ${expectedTitle} within ${timeout}ms`,
+            {
+                timeout,
+                timeoutMsg: `was expecting window title to transition to ${expectedTitle} within ${timeout}ms`,
+            },
         );
     }
 
@@ -77,13 +82,15 @@ export class AppController {
 
         await this.client.waitUntil(
             async () => {
-                const classes = await this.client.getAttribute<string>('body', 'class');
+                const classes = await this.client.getAttribute('body', 'class');
                 return expectedHighContrastMode === classes.includes(highContrastThemeClass);
             },
-            DEFAULT_WAIT_FOR_ELEMENT_TO_BE_VISIBLE_TIMEOUT_MS,
-            `was expecting body element ${
-                expectedHighContrastMode ? 'with' : 'without'
-            } class high-contrast-theme`,
+            {
+                timeout: DEFAULT_WAIT_FOR_ELEMENT_TO_BE_VISIBLE_TIMEOUT_MS,
+                timeoutMsg: `was expecting body element ${
+                    expectedHighContrastMode ? 'with' : 'without'
+                } class high-contrast-theme`,
+            },
         );
     }
 
@@ -108,14 +115,14 @@ export class AppController {
     ): Promise<void> {
         await this.client.waitUntil(
             async () => {
-                const executeOutput = await this.client.executeAsync((prop, done) => {
+                return await this.client.executeAsync((prop, done) => {
                     done((window as any)[prop] != null);
                 }, propertyName);
-
-                return executeOutput.status === 0 && executeOutput.value === true;
             },
-            DEFAULT_WAIT_FOR_ELEMENT_TO_BE_VISIBLE_TIMEOUT_MS,
-            `was expecting window.${propertyName} to be defined`,
+            {
+                timeout: DEFAULT_WAIT_FOR_ELEMENT_TO_BE_VISIBLE_TIMEOUT_MS,
+                timeoutMsg: `was expecting window.${propertyName} to be defined`,
+            },
         );
     }
 }

src/tests/electron/common/view-controllers/automated-checks-view-controller.ts

@@ -48,7 +48,7 @@ export class AutomatedChecksViewController extends ViewController {
 
     public async setToggleState(toggleSelector: string, newState: boolean): Promise<void> {
         await this.waitForSelector(toggleSelector);
-        const oldState = await this.client.getAttribute<string>(toggleSelector, 'aria-checked');
+        const oldState = await this.client.getAttribute(toggleSelector, 'aria-checked');
 
         const oldStateBool = oldState.toLowerCase() === 'true';
         if (oldStateBool !== newState) {

src/tests/electron/common/view-controllers/spectron-async-client.ts

@@ -1,15 +1,67 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
-import { SpectronWindow } from 'spectron';
+import { SpectronClient, SpectronWindow } from 'spectron';
 import * as WebDriverIO from 'webdriverio';
 
-// spectron 10.0.1 includes @types/webdriverio, whose absence
-// we worked around when initially consuming spectron.
-// @types/webdriver lacks promises, so this file adds
-// promise-based signatures that our e2e code can rely on.
-// @types/webdriver has been superceded by improved types
-// in webdriverio 5 directly, but Spectron has not consumed them
+// This file worked around incorrect or missing spectron/webdriverio
+// typings in the past. webdriverio types are improved in spectron 12.0.0,
+// so parts of this file can be removed by updating individual end-to-end
+// tests/controllers to consume SpectronClient directly. SpectronAsyncWindow
+// works around github issue spectron@343
+
+export function getSpectronAsyncClient(client: SpectronClient, browserWindow: SpectronWindow) {
+    const typedAsyncClient: SpectronAsyncClient = {
+        browserWindow: (browserWindow as unknown) as SpectronAsyncWindow,
+        $: (selector: string) => client.$(selector),
+        $$: (selector: string) => client.$$(selector),
+        click: async (selector: string) => {
+            const element = await client.$(selector);
+            return await element.click();
+        },
+        execute: (script: string | ((...args: any[]) => void), ...args: any[]) =>
+            client.execute(script, ...args),
+        executeAsync: (script: string | ((...args: any[]) => void), ...args: any[]) =>
+            client.executeAsync(script, ...args),
+        getAttribute: async (selector: string, attributeName: string) => {
+            const element = await client.$(selector);
+            return await element.getAttribute(attributeName);
+        },
+        getText: async (selector: string) => {
+            const element = await client.$(selector);
+            return await element.getText();
+        },
+        isEnabled: async (selector: string) => {
+            const element = await client.$(selector);
+            return await element.isEnabled();
+        },
+        keys: (keys: string) => client.keys(keys),
+        pause: (milliseconds: number) => client.pause(milliseconds),
+        waitForEnabled: async (selector: string, milliseconds?: number, reverse?: boolean) => {
+            const element = await client.$(selector);
+            return await element.waitForEnabled({
+                timeout: milliseconds,
+                reverse,
+            });
+        },
+        waitForExist: async (
+            selector: string,
+            milliseconds?: number,
+            reverse?: boolean,
+            timeoutMsg?: string,
+        ) => {
+            const element = await client.$(selector);
+            return await element.waitForExist({
+                timeout: milliseconds,
+                reverse,
+                timeoutMsg,
+            });
+        },
+        waitUntil: (condition: () => Promise<Boolean>, options?: WebDriverIO.WaitUntilOptions) =>
+            client.waitUntil(condition, options),
+    };
+    return typedAsyncClient;
+}
 
 export interface SpectronAsyncWindow {
     restore(): Promise<void>;
@@ -20,26 +72,25 @@ export interface SpectronAsyncWindow {
 export interface SpectronAsyncClient {
     // https://github.com/electron-userland/spectron/blob/cd733c4bc6b28eb5a1041ed79eef5563e75432ae/lib/api.js#L311
     browserWindow: SpectronAsyncWindow;
-
-    $(selector: string): Promise<WebDriverIO.RawResult<any>>;
-    $$(selector: string): Promise<WebDriverIO.RawResult<any>[]>;
-    click(selector?: string): Promise<void>;
+    $(selector: string): Promise<WebDriverIO.Element>;
+    $$(selector: string): Promise<WebDriverIO.Element[]>;
+    click(selector: string): Promise<void>;
     executeAsync(script: string | ((...args: any[]) => void), ...args: any[]): Promise<any>;
     execute(script: string | ((...args: any[]) => void), ...args: any[]): Promise<any>;
-    getAttribute<P>(selector: string, attributeName: string): Promise<P>;
+    getAttribute(selector: string, attributeName: string): Promise<string>;
     getText(selector?: string): Promise<string>;
     isEnabled(selector?: string): Promise<boolean>;
     keys(keys: string): Promise<void>;
     pause(milliseconds: number): Promise<void>;
     waitForEnabled(selector: string, milliseconds?: number, reverse?: boolean): Promise<boolean>;
-    waitForExist(selector: string, milliseconds?: number, reverse?: boolean): Promise<boolean>;
-    waitUntil(
-        condition: () =>
-            | boolean
-            | Promise<boolean>
-            | (WebDriverIO.Client<WebDriverIO.RawResult<any>> & WebDriverIO.RawResult<any>),
-        timeout?: number,
+    waitForExist(
+        selector: string,
+        milliseconds?: number,
+        reverse?: boolean,
         timeoutMsg?: string,
-        interval?: number,
+    ): Promise<boolean>;
+    waitUntil(
+        condition: () => Promise<Boolean>,
+        options?: WebDriverIO.WaitUntilOptions,
     ): Promise<boolean>;
 }

src/tests/electron/common/view-controllers/view-controller.ts

@@ -29,23 +29,26 @@ export abstract class ViewController {
                 async () => {
                     return (await this.client.$$(selector)).length === expectedNumber;
                 },
-                timeout,
-                `expected to find ${expectedNumber} matches for selector ${selector} within ${timeout}ms`,
+                {
+                    timeout,
+                    timeoutMsg: `expected to find ${expectedNumber} matches for selector ${selector} within ${timeout}ms`,
+                },
             );
         });
     }
 
+    // Webdriver waits the full implicit waitForTimeout before returning not-found.
+    // This means we need to wrap the waitForExist call with a longer timeout when
+    // reverse is true. See webdriverio@2082 and ai-web@3599.
     public async waitForSelectorToDisappear(
         selector: string,
-        timeout: number = DEFAULT_WAIT_FOR_ELEMENT_TO_BE_VISIBLE_TIMEOUT_MS,
+        timeout: number = DEFAULT_WAIT_FOR_ELEMENT_TO_BE_VISIBLE_TIMEOUT_MS * 2,
     ): Promise<void> {
         await this.screenshotOnError(async () =>
-            this.client.waitUntil(
-                async () => {
-                    const selected = await this.client.$(selector);
-                    return selected.value === null;
-                },
+            this.client.waitForExist(
+                selector,
                 timeout,
+                true,
                 `was expecting element by selector ${selector} to disappear`,
             ),
         );

src/tests/electron/tests/automated-checks-view.test.ts

@@ -15,7 +15,6 @@ import { AutomatedChecksViewController } from 'tests/electron/common/view-contro
 import { commonAdbConfigs, setupMockAdb } from 'tests/miscellaneous/mock-adb/setup-mock-adb';
 import { testResourceServerConfig } from '../setup/test-resource-server-config';
 import { androidTestConfigs } from 'electron/platform/android/test-configs/android-test-configs';
-import { RawResult } from 'webdriverio';
 
 describe('AutomatedChecksView', () => {
     let app: AppController;
@@ -151,7 +150,7 @@ describe('AutomatedChecksView', () => {
             'data:image/png;base64,' + axeRuleResultExample.axeContext.screenshot;
 
         await automatedChecksView.waitForSelector(ScreenshotViewSelectors.screenshotImage);
-        const actualScreenshotImage = await automatedChecksView.client.getAttribute<string>(
+        const actualScreenshotImage = await automatedChecksView.client.getAttribute(
             ScreenshotViewSelectors.screenshotImage,
             'src',
         );
@@ -161,11 +160,9 @@ describe('AutomatedChecksView', () => {
 
     it('ScreenshotView renders expected number/size of highlight boxes in expected positions', async () => {
         await automatedChecksView.waitForSelector(ScreenshotViewSelectors.highlightBox);
-        const styles = await automatedChecksView.client.getAttribute<string[]>(
-            ScreenshotViewSelectors.highlightBox,
-            'style',
-        );
 
+        const boxes = await automatedChecksView.client.$$(ScreenshotViewSelectors.highlightBox);
+        const styles = await Promise.all(boxes.map(async b => await b.getAttribute('style')));
         const actualHighlightBoxStyles = styles.map(extractPositionStyles);
         verifyHighlightBoxStyles(actualHighlightBoxStyles, [
             { width: 10.7407, height: 6.04167, top: 3.28125, left: 89.2593 },

src/tests/miscellaneous/codecs/codecs-test.js

@@ -3,6 +3,11 @@
 const { app, BrowserWindow } = require('electron');
 
 app.whenReady().then(() => {
-    const win = new BrowserWindow();
+    const win = new BrowserWindow({
+        webPreferences: {
+            nodeIntegration: true,
+            enableRemoteModule: true,
+        },
+    });
     win.loadFile('codecs.html');
 });