Testcafe 更容易檢查頁面上是否存在類選擇器

Question

我有 2 個網頁； 一個頁面顯示一個彈出消息，而另一個頁面沒有我將它設置為：

.expect(Selector('.classname).exists).notOk()

這就是我的假設：第一頁應該通過，因為該類的彈出消息不應該顯示（它通過了；對我來說很有意義）

但是錯誤出現在第二頁中，其中我選擇的該類的彈出消息通過（對我來說沒有意義，因為我正在寫信檢查以確保它不會彈出/存在）

我曾嘗試使用 .visible ，但都失敗了； 第一頁失敗，因為它說類名不存在。 嗯，那很好； 當測試通過但第二頁完全按照我想要的方式失敗時，這就是我想要的。

我試圖測試的類名是當站點不工作時彈出的錯誤消息。 我幾乎想檢查該消息是否彈出； 如果它沒有通過測試； 如果它沒有通過測試

Answer 1

在 testcafe 彈出窗口被視為本地對話。 因此，.visible 不會拾取彈出元素。

您可以使用以下代碼來檢查出現哪種類型的彈出消息。

await t
    .setNativeDialogHandler(() => true);
    `Write code which will bring pop up`

Below piece of code will give you what kind of pop up message is coming (alert/confirm etc.)

const history = await t.getNativeDialogHistory();
console.log(history);

for example if it's a confirm type pop up. Below code will give you what you want.

await t
        .expect(history[0].type).eql('confirm');

希望對你有幫助。

Answer 2

以下代碼正在驗證我們是否在“ https://devexpress.github.io/testcafe/example/ ”頁面上彈出確認。

import { Selector, t } from 'testcafe';

fixture `My fixture`
    .page `https://devexpress.github.io/testcafe/example/`;

test('My test', async t => {
    await t
        .setNativeDialogHandler(() => true)
        .click('#populate');

    const history = await t.getNativeDialogHistory();
    await console.log(history);

    await t
        .expect(history[0].type).eql('confirm')
});

您能否提供您正在使用的代碼。 這將有助於解決問題。

Answer 3

我發現有幫助的是檢查元素是否存在，並且是否可見（或不可見，在您的情況下）：。 然后斷言

async checkForErrorMessage() {
  const errorMessageEl = Selector('.overlay');
  const isErrorVisible = (await errorMessageEl.exists) && (await 
    errorMessageEl.visible);

  await t.expect(isErrorVisible).notOk();
}