TestCafe with Electron throwing "Uncaught TypeError: Cannot read property 'source' of undefined"

Question

Problem

I am getting the following error in devtools when I run TestCafe with the testcafe-electron-browser-provider plugin and the test is stuck on "Loading Webpage".

Uncaught TypeError: Cannot read property 'source' of undefined

Anyone seen this issue or know how it can be resolved?

Environment:

• electron: "9.3.2,"
• node: "12.18.2",
• testcafe: "1.9.4",
• testcafe-browser-provider-electron: "0.0.15"
• OS: Windows 10

Screenshots:

• Screenshot - TestCafe with Electron Stuck on loading page
• Screenshot - Project Structure

Code Snippets

Error:

backend.js:5206 Uncaught TypeError: Cannot read property 'source' of undefined
at e (backend.js:5206)
at l (hammerhead.js:15)
at t.r._onWindowMessage (hammerhead.js:7)
at n (hammerhead.js:15)
at i (hammerhead.js:8)
at hammerhead.js:7

My testcafe config file:

module.exports = {
src: '/test/specs/e2etest.js',
mainWindowUrl: './build/index.html',
appPath: './',
};

My e2etest.js file:

import { Selector } from 'testcafe';

fixture `TestCafe Electron Trial`
         .page('../../build/index.html');

test('check title', async (t) => {
    await t.expect(Selector('title').innerText).eql('Electron Application');
});

test.skip('open file menu open project', async (t) => {
    await t.click("[data-test-id='fileControls-fileMenu']");
    await t.click(Selector('span').withText('Open project'));
    await t.click("[data-test-id='openFileDialog-browse']");
});

Answer 1

Browser's Development Tools can cause errors when you use them during test execution. It's a known issue, and it is described at TestCafe documentation.