e2e testing: Headless mode test passes, regular mode fails

Question

I have an e2e Protractor test that passes in headless mode and fails in regular browser testing. What are the possible reasons it could be failing in regular browser testing?

Note: I'm using Chrome Version 68.0.3440.106 (Official Build) (64-bit) to run the test.

Answer 1

Here's what I learned:

1. Non-headless mode needs to be told to scroll, whereas headless does fine without being told to scroll.

In non-headless, if you don't scroll to the element you're using, it throws a timeout error 'waiting for element' to appear.

My original code (which passes in headless mode but fails in non-headless) was something to the tune of:

 command to do something 

 command to click button

New code (passes in both headless and non-headless):

import import { browser, element } from 'protractor';
// assuming my protractor DOM element is called 'thing'

command to do something 

browser.executeScript('thing.scrollIntoView()', element.getWebElement());

command to click button

2. Non-headless mode needs more waiting between actions.

My original code (which passes in headless mode but fails in non-headless) was something to the tune of:

command to do something 

command to do something else

New code (passes in both headless and non-headless):

command to do something 

browser.waitForAngularEnabled(false);

command to do something else