仅在无头 chrome 中测试失败答案

【问题标题】：Test failing only in headless chrome仅在无头 chrome 中测试失败
【发布时间】：2019-08-20 07:47:32
【问题描述】：

我有一些使用 wdio 的集成测试，它们都通过了。但是，当我在无头 chrome 中运行它们时，其中一项测试失败了。我收到此错误：

1) Reset password by submitting a new password "before all" hook:

element ("#identifierNext") still not existing after 15000ms

问题出在这行代码中：

browser.waitForExist('#identifierNext');

这很奇怪，因为我在其他测试中也使用了waitForExist(<element id>)，而且它们甚至在无头 chrome 中也通过了。我还尝试将waitFor 的限制增加到 30000 毫秒，但还是失败了。

这是我的 wdio 配置：

exports.config = {
    specs: [
        './test/pageobjects/**/reset_password.spec.js'
    ],
    maxInstances: 1,
    capabilities: [{
        maxInstances: 1,
        browserName: 'chrome',
        'goog:chromeOptions': {
            args: ['--headless', '--disable-gpu', '--window-size=1280,800', '--no-sandbox', '--disable-dev-shm-usage']
        }
    }],
    sync: true,
    logLevel: 'silent',
    coloredLogs: true,
    deprecationWarnings: true,
    bail: 0,
    screenshotPath: './errorShots/',
    baseUrl: 'http://127.0.0.1:3000',
    waitforTimeout: 10000,
    connectionRetryTimeout: 90000,
    connectionRetryCount: 3,
    services: ['selenium-standalone'],
    framework: 'mocha',
    reporters: ['spec'],
    mochaOpts: {
        ui: 'bdd',
        timeout: 30000
    },
}

当我从chromeOptions 中删除headless 时，此测试正常通过。任何想法为什么会发生这种情况？

编辑：这是我的 reset_password.spec.js 文件：

describe ('Reset password by submitting a new password', function(){
  //test fails in this before function
  before(function(){
    browser.url(ResetPassword.token_url(valid_email, email_password));
  });

  it ('Password reset without passwords', function(){
    .
    .
    .
  })

});

还有我的 reset_password.page.js 文件：

const Page = require('./page');

class ResetPassword extends Page {

  get email() {
    return $('input[type="text"]');
  }

  get url() {
    return browser.getUrl();
  }

  open() {
    super.open('/reset-password');
  }

  get signIn(){
    browser.waitForExist('*=Sign in');
    return $('*=Sign in');
  }

  get enterEmail(){
    browser.waitForExist('input[type="email"]');
    return $('input[type="email"]');
  }

  get submitEmail(){
    //this fails in headless mode
    browser.waitForExist('#identifierNext');
    return $('#identifierNext');
  }

  get enterPassword(){
    browser.waitForExist('#password > div.aCsJod.oJeWuf > div > div.Xb9hP > input');
    return $('#password > div.aCsJod.oJeWuf > div > div.Xb9hP > input');
  }

  get submitPassword(){
    browser.waitForExist('#passwordNext');
    return $('#passwordNext');
  }

  get tokenEmail(){
    browser.waitForExist('span[email="profiq.ldap@gmail.com"]');
    return $$('span[email="profiq.ldap@gmail.com"]');
  }

  get tokenURL(){
    browser.waitForExist('a[id*=reset_link]');
    const links = $$('a[id*=reset_link]');
    return links[links.length-1].getAttribute('href');
  }

  token_url(email, password){
    browser.url('https://www.google.com/gmail/about/#');
    this.signIn.click();
    browser.switchTab(browser.getTabIds()[1]);
    this.enterEmail.setValue(email);
    this.submitEmail.click();
    this.enterPassword.setValue(password);
    this.submitPassword.click();
    this.tokenEmail[1].click();
    browser.pause(3000);
    return this.tokenURL;
  }

}

module.exports = ResetPassword;

【问题讨论】：

请把整个reset_password.spec.js过去。

标签： javascript integration-testing headless wdio-v4

【解决方案1】：

我发现了问题。 Gmail 在不同浏览器中的显示方式不同。在测试失败之前，我使用browser.saveScreenshot('screenshot.jpg'); 截取了屏幕截图，它显示页面看起来不同（使用我的本地语言而不是英语并且具有不同的外观和按钮）。所以这就是为什么测试找不到具有给定标识符的按钮的原因。

【讨论】：