How can I get access to application actions using TestCafe?

Question

I tried to look for answers, but couldn't find. I want to write a function to delete a previously used test organization before I start my tests in testcafe.

It's quite a time-consuming action if to make it through UI. So I wonder if it is possible to use app actions and write a function to delete my test data?

My thoughts are to perform the next steps: 1. find all test organizations I want to delete 2. iterate through each of them, call ShowDeleteOrgModal() method, and after that call DeleteOrganisation() method.

I saw other test tools provide access to application actions using window(). Is there any way I can implement it in testCafe?

The button selector looks like this.

<button class="button_class" onclick="OurApplicationName.ShowDeleteOrgModal('organisation_id');
return false;">Delete Organisation</button>

We had implemented similar idea in cypress this way:

CleanUpOrgs() {
         cy.window().then((win) => {
         let numberOfOrgs = win.window.$('tr:contains(' + Cypress.env('testOrgName') + ')').length;
            while (numberOfOrgs > 0) {
                cy.get('table').contains('tr', Cypress.env('testOrgName')).then(elem => {
                    let orgId = elem[0].id.replace('OurApplicationName_', '');
                    cy.window().then((win) => {
                        win.window.OurApplicationName.ShowDeleteOrgModal(orgId);
                        win.window.OurApplicationName.DeleteOrganisation();
                        cy.wait(2000);
                    });
                });
                numberOfOrgs--;
            }
        });
    },

How can I get access to the window using TestCafe?

Answer 1

Try using ClientFunction . For example, you can open your modal with the following code:

import { ClientFunction } from 'testcafe';

const showDeleteOrgModal = ClientFunction(organizationId => {
    OurApplicationName.ShowDeleteOrgModal(organizationId);
});

fixture`My fixture`
    .page`http://www.example.com/`;

test('My Test', async t => {
    await showDeleteOrgModal('organisation_id');
});

You can also run the asynchronous code on the client side this way.

---

UPDATE I can't provide you with an exact test without access to the testing page. But I've created an example how this test can look like

import { ClientFunction, Selector, t } from 'testcafe';
import { testOrgName } from './config';

fixture`fixture`
    .page`http://url`;

const trElSelector = Selector('table').find('tr').withText(testOrgName);

const cleanUpOrg = ClientFunction(() => {
    const trElement = trElSelector();
    const orgId     = trElement.id.replace('OurApplicationName_', '');

    window.OurApplicationName.ShowDeleteOrgModal(orgId);
    window.OurApplicationName.DeleteOrganisation();
}, { dependencies: { trElSelector } });

async function cleanUpAllOrgs () {
    const numberOfOrgs = await Selector('tr').withText(testOrgName).length;

    for (let i = numberOfOrgs; i > 0; i--) {
        await cleanUpOrg();
        await t.wait(200);
    }
}

test('test', async t => {
    await cleanUpAllOrgs();
});

I used ClientFunctions , Selectors and the config file for the testOrgName variable (you can learn more about using configurations and environment variables in FAQ ).