Clicking a button based on the text - automated-tests

Question

I am using TestCafe to test a locally run application without problems besides the below :
I have an element that looks as follows:
Upload file
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:
The button's offsetWidth and offsetHeight are greater than zero.
The button does not have styles like display:none or visibility: hidden.
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.
 
 

Answer 2

When TestCafe gives this error message: The specified selector does not match any element in the DOM tree, and I have no clue of what is happening, I take the following path:
I create a Selector variable that targets the element and hover over it before clicking on it:
const uploadFileButton = Selector('a.btn').withExactText('Upload file');
await t
.hover(uploadFileButton)
.click(uploadFileButton);
Notice that in the above code, I have tried to be as specific as possible when defining the Selector.
If, at runtime, you do not see the TestCafe cursor moving towards the target element (this means you don't run in headless mode), then you know that the Selector is wrong. It could be because the element has not mounted in the DOM at the time TestCafe tries to hover over it. To validate this point, modify the TestCafe code to:
const uploadFileButton = Selector('a.btn').withExactText('Upload file');
await t
.expect(uploadFileButton.exists)
.ok({timeout: 10000})
.hover(uploadFileButton)
.click(uploadFileButton);
If, at runtime, TestCafe stops on the .ok() line, then you know that the Selector is definitely wrong.
In this case, go to the developer tools and type the following command in the console:
var el = document.querySelectorAll('a.btn');
el <ENTER>
inspect the content of the el element. If you find the targeted button, then you should check the innerText property and you should check if there is no CSS rule that makes the text upper case or makes it invisible.