TypeError: __get$ is not a Function when testing on a remote browser

[ursweltert]

What is your Scenario?

We have a React SPA application running on a IoT device. The device features a builtin display and includes the Cog browser (Webkit) v0.14.0

• the testcafe setup is running without native automation with the remote option

What is the Current behavior?

• as soon as we load the connectUrl the screen will show the following error:

  An error occured. Please make sure, that your currently used browser is supported.
   
  TypeError: __get$ is not a function. (In '__get$(l,p)', '__get$' is undefined
  

  twice on the screen.

What is the Expected behavior?

The tests should be executed.

We recently updated our testcafe environment from version 1.9.1 to 3.0.1
The used Node version was 12.8.3 and now is 18.18.0 (current LTS release)

Could the issue be related to the node version 18.x like mentioned in these issues:

• TestCafe crashes on Node 18 #7396 (comment)
• "localhost" favours IPv6 in node v17, used to favour IPv4 nodejs/node#40537

We also did a search for previous issues on this topic but could find none that quite matches our use-case
https://github.com/DevExpress/testcafe/issues?q=TypeError%3A+__get%24+is+not+a+Function

What is your public website URL? (or attach your complete example)

The code is executed on device, no public URL is available.

What is your TestCafe test code?

One small example test would be:

Test file TF_ACCESSPOINT.ts

import { Selector } from 'testcafe';
import { configuration, initSetup } from '../setup/setup';
import {
  adminPassword,
  closeButton,
  dialogConfirmButton,
  dialogPasswordField,
  saveButton,
} from '../helpers/common';
import { findByTestId, findByText } from '@testing-library/testcafe';
import { getPageUrl, setSwitch } from '../helpers/helpers';
import { menuButton, requestTokenButton } from '../helpers/home';
import { enterText } from '../helpers/keyboard';

fixture`TF_ACCESSPOINT`
  .meta({
    manual: 'false',
    chr: 'true',
    fire: 'true',
    edge: 'true',
    saf: 'true',
    wkt: 'true',
    tango: 'true',
  })
  .page(configuration.url)
  .before(async () => {
    await initSetup(); // connect to device and reset the database to have a clean starting point for the test to run on
  });

test('TF_ACCESSPOINT', async t => {
  await t
    .click(requestTokenButton)
    // 1
    .click(menuButton)
    .click(findByText('Einstellungen'))
    .click(findByText('Netzwerk'));

  await enterText(dialogPasswordField, adminPassword);
  await t.click(findByText('Access point'));

  await setSwitch('Aktiviert', false);

  await t
    .expect(Selector('#form-ssid').hasClass('Mui-disabled'))
    .ok()

    .expect(Selector('#form-password').hasClass('Mui-disabled'))
    .ok();

  // 2
  // ...more tests
});

Your complete configuration file

const warningHeadingRegexp = /Warnings (\(\d\)):/;
const warningSplitRegexp = /--/;
const whiteSpaceRegexp = /\s/g;

function isWarning(text, warnings) {
  if (warningHeadingRegexp.test(text) || warningSplitRegexp.test(text))
    return true;

  return warnings.some(msg => msg.replace(whiteSpaceRegexp, '') === text.replace(whiteSpaceRegexp, ''));
}

function hideWarningsHook(writeInfo) {
  // console.log("WRITEINFO", writeInfo)
  if (writeInfo.initiator === 'reportWarnings')
    writeInfo.formattedText = '';
  if (writeInfo.initiator === 'reportTaskDone') {
    const warnings = writeInfo.data.warnings || [];

    if (!warnings.length)
      return;

    if (isWarning(writeInfo.formattedText, warnings))
      writeInfo.formattedText = '';
  }
}

module.exports = {
  hooks: {
    reporter: {
      onBeforeWrite: {
        'list': hideWarningsHook,
      },
    },
  },
  src: "./testcafe/tests/**/*.ts",
  color: true,
  reporter: [
    {
      "name": "allure"
    },
    {
      "name": "list"
    }
  ],
  debugMode: false,
  debugOnFail: false,
  quarantineMode: false,
  disablePageCaching: true,
  concurrency: 1,
  speed: 1,
  pageLoadTimeout: 20000,
  selectorTimeout: 6500,
  assertionTimeout: 6500,
  clientScripts: [
    { module: "@testing-library/dom/dist/@testing-library/dom.umd.js" }
  ],
  screenshots: {
    path: "./testcafe/screenshots/",
    pathPattern: "${OS}-${OS_VERSION}/${DATE}_${TIME}/${BROWSER}-${BROWSER_VERSION}/${FIXTURE}/${TEST}/${FILE_INDEX}.png"
  },
  videoPath: "./testcafe/videos/",
  videoOption: {
    singleFile: false,
    failedOnly: false,
    pathPattern: "${OS}-${OS_VERSION}/${DATE}_${TIME}/${BROWSER}-${BROWSER_VERSION}/${FIXTURE}/${TEST}.mp4"
  },
  port1: 8888,
  port2: 8889,
  disableNativeAutomation: true,
};

Your complete test report

There is no report because the test fail to run at all.

Screenshots

Steps to Reproduce

1. start the remote browser test
2. start the browser on the device with the connectUrl
3. wait until the error occurs

TestCafe version

3.0.1

Node.js version

18.18.0

Command-line arguments

testcafe --config-file .testcaferc.cjs remote --fixture-meta wkt=true,manual=false,tango=true

Browser name(s) and version(s)

Cog (Webkit) on IoT device: https://github.com/Igalia/cog/releases/tag/0.14.0

Platform(s) and version(s)

Windows 10

Other

No response

[PavelMor25]

Hello @ursweltert,

The Cog browser is not one of the official browsers supported by TestCafe. We cannot guarantee that custom browsers will work from version to version of TestCafe.

If you want the TestCafe team to research the issue, please share a minimal working example and detailed instructions on how to install the Cog browser and reproduce the issue.