TestCafe - Shared singleton between testcafe and application

Question

I have an application running with Vue, and I am using testcafe to do end-to-end testing.

MyModule.ts

class MyModule {
    public value: string;

    constructor() {}
}

export default new MyModule();

Test cafe file

import MyModule from '../models/utils/MyModule';

fixture('Getting Started')
  .page('http://localhost:8080/en/home/')
  .before(async (ctx) => {
    MyModule.value = 'Set by Test Cafe';
  });

test('Get to the home page', async (t) => {
  ....
});

App.vue

<template>.....</template>
<script>
    import TeMyModulestModule from '@/test/e2e/models/utils/MyModule';
    export default {
    
        created() {
          console.log('MyModule.value', MyModule.value);
        }
    }
</script>

Actual result

MyModule.value undefined

Expected result

MyModule.value 'Set by Test Cafe'

Question

Is it possible to achieve this with testCafe? If so what am I doing wrong?

Answer 1

A TestCafe test fixture is a regular node.js script, and it is executed on the server side. You are trying to share your module between different contexts (node.js server-side and browser client-side).

You can put the specified value into the global window object using the ClientFunction or Inject Client Scripts approach and obtain it from the Vue script.