檢查是否img src在TestCafe中有正確的路徑

Question

我使用TestCafe執行測試並需要檢查img是否具有正確的路徑。有兩個IMG元素：

案例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> 

結果：之前有一個錯誤。

案例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> 

結果：bullet_gr.png是在網站上。 Everthing是可以的！

在我的測試中，我使用.expect(Selector('img[src="images/icons/bullet_gr.png"]'))來檢查bullet_gr.png是否在我的網站上可見。不幸的是，ID在每次訪問時都不相同（當用戶登錄時它們會呈現，並且對於每次訪問都是唯一的）。所以我不能使用.expect(Selector('#dynamicID4'))。

一旦我在我的測試中使用.expect(Selector('img[src="images/icons/bullet_gr.png"]'))行，它立即完成，一旦用戶登錄與測試，我得到的測試成功的輸出。

檢查bullet_gr.png是否在網站上鍊接的解決方案是什麼？

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();