Tests failing on OS Chrome but passing on Windows

So a little of background info:

Our company works with fixed versions of Google Chrome, right now v83 and we are starting to migrate to v86. The thing is, when testing our app with Protractor, it fails inconsistently on OS Chrome v83, but gives all green on Windows Chrome v83.

We don’t know if it’s a problem of missmatching versions (we are using protractor 7.0.0), or is something with how OS manages its resources, or the render engine in OS Chrome, but the thing is we can’t keep this inconsistency, as we are not able to assure everything is working just fine if it fails in different environments.

For example, a test that checks a checkbox clicking on it, and checks that the one clicked is checked and the rest are not, fails sometimes giving an error in the locator:

The test:

it('Multiselector: Deseleccionar en contenedor', async () => {
    label = 'Rol';
    let optionCheckboxes = mLib.getAllElementsByCss(
      'm-select-option m-checkbox'
    );
    mLib.click(mLib.getFormFieldByLabel(label));
    mLib.click(optionCheckboxes.get(0));
    mLib.click(optionCheckboxes.get(1));
    mLib.click(optionCheckboxes.get(0));
    expect(optionCheckboxes.get(0).getAttribute('ng-reflect-checked')).toBe(
      'false',
      'Checkbox 1 no debe estar marcado'
    );
    expect(optionCheckboxes.get(1).getAttribute('ng-reflect-checked')).toBe(
      'true',
      'Checkbox 2 debe estar marcado'
    );
    expect(optionCheckboxes.get(2).getAttribute('ng-reflect-checked')).toBe(
      'false',
      'Checkbox 3 no debe estar marcado'
    );
  });

Our mLib wrapper:

public click(elementFinder: ElementFinder, doubleClick?: boolean) {
    doubleClick
      ? browser.actions().doubleClick(elementFinder).perform()
      : elementFinder.click();
  }

public getAllElementsByCss(cssLocator: string): ElementArrayFinder {
    return element.all(by.css(cssLocator));
  }

public getFormFieldByLabel(label: string): ElementFinder {
    return element(by.css('m-form-field[label="' + label + '"]'));
  }

The error:

- Failed: Index out of bound. Trying to access element at index: 0, but there are only 0 elements that match locator By(css selector, m-select-option m-checkbox)

And again, this fails only sometimes, not consistently.

Our OS version is Catalina 10.15.6 (can’t upgrade either). Here’s our protractor.conf.js file:

const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter');
const tsConfig = require('../../../tsconfig.base.json');

exports.config = {
  allScriptsTimeout: 11000,
  specs: ['./spec/*/*.e2e-spec.ts'],
  getPageTimeout: 10000,
  multiCapabilities: [
    {
      browserName: 'chrome',
      logName: 'Google Chrome',
      version: '83.0.4103.39'
    }
  ],
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine2',
  suites: {
    testComponents: './Spec/Components/*.e2e-spec.ts',
    testCore: './Spec/Core/*.e2e-spec.ts'
    },
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function () {},
  },
  onPrepare() {
    require('ts-node').register({
      project: require('path').join(__dirname, './tsconfig.json'),
    });
    require('tsconfig-paths').register({
      project: require('path').join(__dirname, './tsconfig.e2e.json'),
      baseUrl: './',
      paths: tsConfig.compilerOptions.paths
    });
    jasmine.getEnv().addReporter(
      new SpecReporter({
        spec: {
          displayStacktrace: StacktraceOption.NONE,
          displayErrorMessages: true,
          displayFailed: true
        }
      })
    );
  },
};

Thanks in advance!

Edit: added some examples of missing tests.

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.