如何测试使用量角器进行 api 调用的多个点击事件

Question

I have some buttons that when clicked make an ajax request, and when the request completes it enables/disables buttons (for pagination). I am not 100% sure on how to handle this since the request takes upto 1000ms, I would like to know if this is the correct way to handle the click by waiting for the next button to become enabled:

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

Do I even need to tell the browser to wait or does protractor know that it needs to wait automatically?

Here is one of my assertions:

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

When it runs I am getting the following error:

[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

The first button should be disabled because there are no more pages before it since it is the first page.

What is it that I need to do to get this to pass?

Answer 1

Normally, whenever an application is waiting for request to populate results in the UI, there should be a loading animation, to indicate the page hasn't been loading. If this is something developers can add, this would be ideal. In this case you will just wait until the loading animation goes away

If this is not an option then look for any UI changes, lets say if the button is disabled until the results are received and it clearly indicates the app awaits for the results, then it would be the best strategy. You can basically add waiting until the button is clickable os make a suctom function. If you're having problems with this let me know I'll help

Answer 2

You can use ExpectedConditions to wait for a button to be clickable. One thing to be aware of, it does not check if the button you want to click is covered by another element or not. It only checks that the element is enabled and visible in the UI such that it can be clicked. If your element is covered by an overlay or loading animation or something like that, then you will need to wait for that element to go away or at least not be covering the button before you click on it. Here is how I use it:

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