The element that matches the specified selector is not visible.

[zacid]

Are you requesting a feature or reporting a bug?

Reporting a bug

What is the current behavior?

I am certain that my element is visible and have done the necessary tests. Debugging works. If I do await t.debug() and then step over behaviour as expected.

What is the expected behavior?

Expecting element to be visible and once click is supplied to Selector for action to work but instead fails and I am getting this:

✖ Wizard 1

   1) The element that matches the specified selector is not visible.

      Browser: Chrome 62.0.3202 / Mac OS X 10.13.1

         50 |        .click(intendedTimeOption.withText('7:00'))
         51 |        .expect(page2ComlpleteHeading.exists).ok()
         52 |        .expect(page2ComlpleteHeading.innerText).eql('Review Your Booking')
         53 |        .expect(Selector("#submit-id-book_appointment").value).eql("Next");
         54 |        // await t.debug();
       > 55 |        await t.click(Selector("#submit-id-book_appointment"));
         56 |
         57 |
         58 |});
         59 |

         at <anonymous> (/Users/zac/code/testcafe/sweep.js:55:17)

 1/1 failed (26s)

How would you reproduce the current behavior (if this is a bug)?

Please run JS code below

Tested page URL:
https://sweepsouth.com/book
Test code

import { Selector } from 'testcafe';

fixture `Booking`// declare the fixture
    .page `https://sweepsouth.com/book`;


function stringGen(len) {
    var text = "";
    var charset = "abcdefghijklmnopqrstuvwxyz0123456789";

    for( var i=0; i < len; i++ ) {
        text += charset.charAt(Math.floor(Math.random() * charset.length));
    }

    return text;
}


const bedroomsSelect = Selector('#id_bedrooms');
const bedroomsOption = bedroomsSelect.find('option');

const bathroomsSelect = Selector('#id_bathrooms');
const bathroomsOption = bathroomsSelect.find('option');

const intendedTimeSelect = Selector('#id_intended_time');
const intendedTimeOption = intendedTimeSelect.find('option');

const page1ComlpleteHeading = Selector('#pick-datetime .blockLabel');
const page2ComlpleteHeading = Selector('#review-order .blockLabel');


test('Wizard 1', async t => {
    await t
        .typeText('#id_street', '16 Atlantic Way, Sun Valley, Cape Town')
        .click('#use-location')
        .click('#save_location_id')
        .click(bedroomsSelect)
        .click(bedroomsOption.withText('3 Bedrooms'))
        .click(bathroomsSelect)
        .click(bathroomsOption.withText('3 Bathrooms'))
        .click(Selector('#div_id_in_fridge'))
        .click(Selector('#div_id_in_cabinets'))
        .typeText('#id_email', stringGen(10) + "@" + stringGen(5) + "." + stringGen(3))
        .click(Selector('#submit-id-next_step2'))
        .expect(page1ComlpleteHeading.exists).ok()
        .expect(page1ComlpleteHeading.innerText).eql('Choose a Date & Time')
        .click(Selector('#id_intended_date'))
        .click(Selector('.datepicker-days td').nth(19))
        .click(intendedTimeSelect)
        .click(intendedTimeOption.withText('7:00'))
        .expect(page2ComlpleteHeading.exists).ok()
        .expect(page2ComlpleteHeading.innerText).eql('Review Your Booking')
        .expect(Selector("#submit-id-book_appointment").value).eql("Next");
        // With debug uncommented and then applying next step this works
        // await t.debug();
        await t.click(Selector("#submit-id-book_appointment"));


});

Specify your

• operating system: Mac OSX 10.13.1
• testcafe version: 0.18.5
• node.js version: 9.2.1

[AlexanderMoskovkin]

Hi @zac156,

Thanks for your report. I've reproduced the issue.
We'll fix it but I've already found an easy workaround for your case. Check the #submit-id-book_appointment element is visible before click:

        ...
        .expect(page2ComlpleteHeading.innerText).eql('Review Your Booking')
        .expect(Selector("#submit-id-book_appointment").value).eql("Next");
        // With debug uncommented and then applying next step this works
        // await t.debug();
        await t
            .expect(Selector("#submit-id-book_appointment").visible).ok()
            .click(Selector("#submit-id-book_appointment"));

The issue is occurred because of the following reason: when TestCafe is going to click on the Next button it found the button that is invisible at the moment (I guess it's the button from the previous view that is hidden but not removed). TestCafe resumes to wait while it became visible but unsuccessfully because the page generated a new button with the same selector instead of the old one.

Here is a simple example to reproduce the issue:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="target" value="input" style="visibility: hidden;"/>

    <script>
        window.setTimeout(function () {
            const input = document.getElementById('target');
            const parent = input.parentNode;

            parent.removeChild(input);

            const newInput = document.createElement('input');

            newInput.id = 'target';
            newInput.value = 'new input';

            document.body.appendChild(newInput);
        }, 2000);
    </script>
</body>
</html>

fixture `gh-1994`
    .page `http://localhost:8080/`;

test(`gh-1994`, async t => {
    await t.click('#target');
});

[zacid]

Great thank you, the work-around worked for now too

[lock]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests. We recommend you ask TestCafe API, usage and configuration inquiries on StackOverflow.