CODEWITHSUNDEEP
testingautomated-testse2e-testingtestcafeui-testing
Fabian
Fabian

Reputation: 561

Waiting for element to appear on static button in TestCafe

I have a strange behavior of TestCafe on my site. I have two checkboxes on a site and a button that brings me to the next step as soon as I click on it. When the page load, de button is visible and does not get manipulated at any time.

Here is the markup of the button:

<button id="confirmation-submit" type="submit" class="btn btn-success pull-right hidden-xs">
     <span class="glyphicon glyphicon-flag"></span>
     order now
</button>

Here is what my code looks like (the relevant part for this problem):

const submitOrderBtn = Selector('button[type="submit"].btn-success');
//const submitOrderBtn = Selector('#confirmation-submit');

test('complete order', async t =>{
     await t
          .click(submitOrderBtn)

In chrome it shows me this picture:

enter image description here

The output of the command line is this: enter image description here

The button is visible the whole time and even when I look over the site with the developer tools, the button is there and it has the id (confirmation-submit) that I want to be clicked.

How can I get around this problem? On other pages, I can use the .click function without any problems.

Upvotes: 3

Views: 1362

Answers (3)

mohamed benmoussa
mohamed benmoussa

Reputation: 31

<button data-se-id="confirmation-submit" type="submit" class="btn btn-success pull-right hidden-xs"> order now </button

and in test add like this : for click specified element :

const submitOrderBtn =Selector('[data-se-id="confirmation-submit"]') test('complete order', async t =>{ await t .click(submitOrderBtn)

Upvotes: 0

hdorgeval
hdorgeval

Reputation: 3030

As a workaround you could try to click on the button parent container:

const submitOrderBtn = Selector('#confirmation-submit');
const confirmSelector = submitOrderBtn.parent();
test('complete order', async t =>{
     await t
          .click(confirmSelector)

if this does not work for the immediate parent, you could try to fetch the first parent div like this: 

const submitOrderBtn = Selector('#confirmation-submit');
    const confirmSelector = submitOrderBtn.parent('div');
    test('complete order', async t =>{
         await t
              .click(confirmSelector)

Upvotes: 1

Alex Skorkin
Alex Skorkin

Reputation: 4274

As @Andrey Belym mentioned in his comment, TestCafe will consider element visibile if its width or height have a non-zero value and it is not hided using CSS properties like display: hidden and visibility: none.

You can check it in Computed CSS Properties in DevTools. In your case, #confirmation-button might be an invisible button hidden somewhere in an actual visible element.

Also, you can try to resize browser window using resizeWindow action. It may help if your layout is adaptive or it is a scrolling issue.

Upvotes: 1

Related Questions