How to locate/click selector (button) using testcafe

Question

I am trying to test the submission of an application using testcafe. However, I don’t seem to be able to get testcafe to click the ‘Submit Application’.

I have tried the following so far:

.click(Selector('button').withText('Submit Applicaition'))
.click('#submit-application').withText('Submit Application')

And a few more options.

I cannot even get testcafe to find the button

import {Selector} from 'testcafe';

fixture `MES login`
 .page `http://mes.coeo.com.au/`;

test('FindButton', async t => {

    await t
    .wait(2000)
        .navigateTo('/le12625-senior-exploration-geologist')
    .wait(2000);

    const one = await Selector('#submit-application');

    const two = one.exists;

    await t
        .expect(two).ok()

    await t
    .wait(5000)
        .click(Selector(one));
}

Can anyone give me a hand, explaining whether it is my testcafe script or the way the website is built and how I can make testcafe click the button?

Thanks a lot.

Link to site

Answer 1

Try this solution:

test('FindButton', async t => {
    const submitButton = Selector('div#submit-application');
    await t
        .navigateTo('/le12625-senior-exploration-geologist')
        .expect(submitButton.with({visibilityCheck: true}).exists)
        .ok({timeout: 30000})
        .hover(submitButton)
        .click(submitButton);

});

and add the --skip-js-errors to the TestCafe command-line options, because when you submit without inputing any field, there is an error on line console.log(this.state.data['State'].value); due to the fact that this.state.data is an empty object