WebdriverIO 中的自动化测试中页面重定向后不显示元素

Question

我的测试不稳定，测试有时会通过，有时会失败。我发现的主要原因是唯一一次当重定向到某个页面时元素无法显示、存在、单击等。尝试增加超时但仍然没有帮助。最有效的元素是通过 CSS 选择器或 XPATH 获取的，并使用开发人员工具控制台进行检查。任何人都可以帮助可能是什么原因以及有什么帮助吗？

我的测试文件 vpsHostingPlan.test.js：

`describe('The VPS Hosting plan should be displayed, term option should be changed and total cost should be calculated', () => {
  beforeEach(async () => {
    await homePage.openPage();
    await vpsPage.selectVPS4vCPU();
  });

  afterEach(async () => {
    await cookiesHelper.deleteCookies();
    await browser.refresh();
    await browser.execute(() => {
      sessionStorage.clear();
  });
  });

  it('The total cost of all added plans should be calculated correctly', async () => {
    const totalCost = await orderServerPlan.getTotalCost();
    const totalPlanSummaryPrice = await orderServerPlan.getSummaryPrice();
    const roundedTotalCost = Math.round(totalCost * 100) / 100;
    const roundedSummaryPrice = Math.round(totalPlanSummaryPrice * 100) / 100;
    expect(roundedTotalCost).toBe(roundedSummaryPrice);
  });`

我从规范测试文件中调用的方法

`async getTotalCost() {
    await $('.sec-header').waitForExist({ timeout: 30000 });
    await waiters.waitForElementToBeDisplayed(this.vps4vcpTotalPrice, 40000);
    await this.vps4vcpTotalPrice.scrollIntoView();
    const sidebarTotalText = await this.vps4vcpTotalPrice.getText();
    const totalMatch = sidebarTotalText.match(/Total:\s*\$\s*([0-9.,]+)/);
    return parseFloat(totalMatch[1].replace(/,/g, ''));
  }

async selectVPS4vCPU() {
    await this.click(this.vpsHostingLink);
    await this.vps4vcpuBtn.scrollIntoView();
    await waiters.waitForElementToBeDisplayed(this.vps4vcpuBtn);
    await this.vps4vcpuBtn.waitForDisplayed();
    await this.click(this.vps4vcpuBtn);
    await waiters.waitForLoaderToComplete(loader.pageLoader, 30000);
 }`

我的服务员方法在helper文件夹中

`class Waiters {
  DEFAULT_TIMEOUT = 10000;
  async waitForLoaderToComplete(loaderElement, timeout = this.DEFAULT_TIMEOUT) {
    await browser.waitUntil(async () => !(await loaderElement.isDisplayed()), {
      timeout,
      timeoutMsg: `Loader did not complete within ${timeout}ms`,
    });
  }

  async waitForElementToBeDisplayed(element, timeout = this.DEFAULT_TIMEOUT) {
    await browser.waitUntil(
      async () => await element.isDisplayed(),
      { timeout, timeoutMsg: `Element ${await element.selector} was not displayed within ${timeout}ms` }
    );
  }

  async waitForPageLoad(timeout = this.DEFAULT_TIMEOUT) {
    await browser.waitUntil(
      async () => browser.execute(() => document.readyState === 'complete'),
      {
        timeout: timeout,
        timeoutMsg: `Page did not finish loading within ${timeout} ms`,
      },
    );
  }

  async waitForClickable(element, timeout = this.DEFAULT_TIMEOUT) {
    await browser.waitUntil(async () => await element.isClickable(), {
      timeout: timeout,
      timeoutMsg: `Element ${await element.selector} was not clickable within ${timeout}ms`,
    });
  }

  async waitForUrlToBe(expectedUrl, timeout = this.DEFAULT_TIMEOUT) {
    await browser.waitUntil(async () => {
      const currentUrl = await browser.getUrl();
      return currentUrl === expectedUrl;
    }, {
      timeout,
      timeoutMsg: `Expected URL to be "${expectedUrl}" but got "${await browser.getUrl()}" after ${timeout}ms`
    });
  }
}

module.exports = new Waiters();`

我需要找到一种方法来始终获取元素并通过测试。

Answer 1

根据我的经验，当您开始测试而不确定测试的元素是否已经在页面上时，测试就会不稳定。 这可能是因为测试时页面加载速度很慢，或者是因为使用ajax加载元素。

例如，在您的情况下，第一次交互是通过 selectVPS4vCPU() 完成的，但不检查页面是否已加载（等待 this.click(this.vpsHostingLink);，scrollintoview）。通过这样做，页面被冻结在第一个等待开始的状态。有时页面已经加载完毕，有时还没有 => 不稳定。

当不确定页面是否已加载时（这里就是这种情况），您应该从等待操作开始以检查是否没有数据正在加载。例如，等待预期元素出现，或等待加载器图标消失。