Clicking a button based on the text

Question

I am using TestCafe to test a locally run application without problems besides the below :

I have an element that looks as follows:

<a href="internallink" class="btn btn-success">Upload file</a>

When the test attempts to click the element by using

.click(Selector('.btn').withText('Upload file'))

the following error is given

   1) The specified selector does not match any element in the DOM tree.

         | Selector('.btn')
       > |   .withText('Upload new file')

Any hint would be appreciated as to what could be wrong.

Answer 1

I've checked a button click on the Bootstrap site with a similar button and it works as expected. Please see the following code:  

import { Selector } from 'testcafe';

fixture `bootstrap`
.page `https://getbootstrap.com/docs/4.2/components/buttons/`;

test(`click button`, async t => {
    await t.click(Selector('.btn').withText('Success'));
});

  I recommend you check your site and ensure that:

1. The button's offsetWidth and offsetHeight are greater than zero.
2. The button does not have styles like display:none or visibility: hidden.

3. The button contains exactly the same text as you are searching for.

     If this does not help, It would be great if you share your project or website url to demonstrate the issue.