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:

$rootScope

Result of this case: there was an error before.

Case 2:

<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: bullet_gr.png is on the site. Everthing is ok!

In my test I use <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> to check if the .expect(Selector('img[src="images/icons/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 bullet_gr.png.

As soon as I use the .expect(Selector('#dynamicID4')) 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?

Answer 1

要检查元素是否在页面上，请使用exists属性：

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

或

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

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