Check if img src has correct path in TestCafe

Question

I perform a test with TestCafe and need to check if an img has the correct path. There are two img elements:

Case 1:

<div class="x-grid3-cell-inner x-grid3-col-2" unselectable="on" id="dynamicID1">
     <img src="images/icons/bullet_wh.png">
     <img src="images/icons/bullet_re.png" id="dynamicID2">
</div>

Result of this case: there was an error before.

Case 2:

<div class="x-grid3-cell-inner x-grid3-col-2" unselectable="on" id="dynamicID3">
     <img src="images/icons/bullet_gr.png">
     <img src="images/icons/bullet_wh.png" id="dynamicID4">
</div>

Result of this case: bullet_gr.png is on the site. Everthing is ok!

In my test I use .expect(Selector('img[src="images/icons/bullet_gr.png"]')) to check if the bullet_gr.png is visible on my site. Unfortunately the IDs are different on every visit (they get rendered when the user logs in and are unique for every visit). So I cannot use .expect(Selector('#dynamicID4')).

As soon as I use the .expect(Selector('img[src="images/icons/bullet_gr.png"]')) line in my test it immediately finishes once the user is logged in with the test and I get the output that the test was successful.

What would be the solution to check if the bullet_gr.png is linked on the site?

score 3 · Answer 1 · answered Dec 18 '17 at 08:40

To check whether the element is on the page, use the exists property:

await t.expect(Selector('img[src="images/icons/bullet_gr.png"]')).ok()

or

const img = Selector('img').withAttribute('src', 'images/icons/bullet_gr.png');

await t.expect(img.exists).ok();

Check if img src has correct path in TestCafe

1 Answers1