如何測試使用量角器進行 api 調用的多個點擊事件

Question

我有一些按鈕，當點擊它們時會發出 ajax 請求，當請求完成時，它會啟用/禁用按鈕（用於分頁）。 我不是 100% 確定如何處理這個，因為請求需要長達 1000 毫秒，我想知道這是否是通過等待下一個按鈕啟用來處理點擊的正確方法：

When('I click {string} to navigate pagination', async (item: ButtonType) => {
  const first = element(by.css('#first'));
  const last = element(by.css('#last'));
  switch (item) {
    case 'first':
      await last.click();
      await browser.wait(until.elementIsEnabled(first.getWebElement()), 1500);
      await first.click();
      break;
  }
});

我什至需要告訴瀏覽器等待還是量角器知道它需要自動等待？

這是我的斷言之一：

Then('I should see the {string} set of items', async (item: ButtonType) => {
  const firstEnabled = await element(by.css('#first')).isEnabled();
  const prevEnabled = await element(by.css('#prev')).isEnabled();
  const nextEnabled = await element(by.css('#next')).isEnabled();
  const lastEnabled = await element(by.css('#last')).isEnabled();
  switch (item) {
    case 'first':
      expect(firstEnabled).to.eq(false);
      expect(prevEnabled).to.eq(false);
      expect(nextEnabled).to.eq(true);
      expect(lastEnabled).to.eq(true);
      break;
  }
});

當它運行時，我收到以下錯誤：

[chrome #01-6]    ✖ Then I should see the "first" set of items
[chrome #01-6]        AssertionError
[chrome #01-6]            + expected - actual
[chrome #01-6] 
[chrome #01-6]            -true
[chrome #01-6]            +false

第一個按鈕應該被禁用，因為它是第一頁，因為它之前沒有更多的頁面。

我需要做什么才能讓這件事通過？

Answer 1

通常，每當應用程序等待請求在 UI 中填充結果時，都應該有一個加載動畫，以指示頁面尚未加載。 如果這是開發人員可以添加的內容，這將是理想的。 在這種情況下，您只需等到加載動畫消失

如果這不是一個選項，那么尋找任何 UI 更改，假設按鈕在收到結果之前被禁用，並且它清楚地表明應用程序正在等待結果，那么這將是最好的策略。 您基本上可以添加等待，直到按鈕可點擊 os make a suctom 功能。 如果您在這方面遇到問題，請告訴我，我會提供幫助

Answer 2

您可以使用ExpectedConditions等待按鈕可點擊。 需要注意的一件事是，它不會檢查您要單擊的按鈕是否被另一個元素覆蓋。 它只檢查元素是否在 UI 中啟用和可見，以便可以單擊它。 如果您的元素被覆蓋或加載動畫或類似的東西覆蓋，那么您將需要等待該元素消失或至少在單擊它之前沒有覆蓋按鈕。 這是我如何使用它：

import { ExpectedConditions } from 'protractor';

export default class MyClass {
  public EC = ExpectedConditions;
  public wait = 5000;

  public async waitForElementToBeClickable(elem: ElementFinder): Promise<void> {
    await browser.wait(this.EC.elementToBeClickable(elem), this.wait);
  }
}


// usage
const myElement = element(by.css('my-button'));
await myClass.waitForElementToBeClickable(myElement);
await myElement.click();