TimeoutError, Docker configuration and ERR_CONNECTION_REFUSED

[AdrienLemaire]

When running backstopjs from travis, I have many issues like follow:

Puppeteer encountered an error while running scenario "dialog: LoginForm"
TimeoutError: waiting for selector ".login-btn" failed: timeout 30000ms exceeded

Since tests pass on local, this issue is unique to the travis environment.
Hoping that it would resolve such errors, I'm trying to setup docker to run tests with --shm-size 512m.
But I'm having troubles configuring the /etc/hosts of the docker image.

Basically, I want backstop to query my nginx server using a specific local domain name, then have nginx forward the request to the backend server.
docker cannot query the domain name out of the box.
I tried adding the extra_hosts option to my docker-compose config file

  backstop:
    image: backstopjs/backstopjs
    depends_on:
    - reverse-proxy
    volumes:
    - ../../project:/src
    shm_size: 512m
    extra_hosts:
    - "project.local:127.0.0.1"

But it results in new errors when running backstop

Puppeteer encountered an error while running scenario "dialog-signup"
Error: net::ERR_CONNECTION_REFUSED at https://project.local/backstop

I also tried to play with networks, but unsure as to how I should configure it, I couldn't get it working.
I tried things like this:

version: '3.4'   # docker 17.09.0+  & docker-compose 1.23.2

services:

  reverse-proxy:
    build: ./reverse-proxy
    ports:
    - 443:443
    depends_on:
    - backend
    volumes:
    - ./reverse-proxy/project.conf:/etc/nginx/conf.d/project.conf
    networks:
      nginx:
        aliases:
          - project.local

  backstop:
    image: backstopjs/backstopjs
    depends_on:
    - reverse-proxy
    volumes:
    - ../../project:/src
    shm_size: 512m
    networks:
    - nginx

networks:
  nginx:

Do you know how to properly update a docker-compose config to use BackstopJS with a specific domain name ?
Or might you know of a solution regarding the initial TimeoutError error so I can run backstopjs without docker from travis ?

[garris]

Unfortunately Docker networking is very complex. BackstopJS only supports a basic usecase. Anything more fancy I won't be able to help. Please feel
Free to post your solution here for others if you can figure it out.

Cheers!

[nsp27]

Just wanted to update that I got that issue while launching a physical browser and launched it headlessly, using browser-sync and then was able to run backstop test. Here are my parameters for backstop json.
"engine": "puppeteer",
"engineOptions": {
"slowMo": 500,
"args": [
"--no-sandbox",
"--disable-setuid-sandbox",
"--disable-gpu",
"--force-device-scale-factor=1",
"--disable-infobars=true",
"--hide-scrollbars",
"--disable-dev-shm-usage",
"--shm-size 512mb",
"--cap-add=SYS_ADMIN"
]
},
"asyncCaptureLimit": 5,
"asyncCompareLimit": 50,
"debug": false,
"debugWindow": false

[garris]

Nice! Thanks for sharing your config.

[AdrienLemaire]

Closing since these issues have been solved.
Fyi, I talk about BackstopJS, the issues I faced and how I resolved them in 2 articles:

• Overview of BackstopJS, a tool to test a web application’s UI
• A journey in Continuous Integration Testing

[garris]

Articles are totally cool -- thanks for posting! Do you mind if I link to them from the doc?

Also, quick notes: I am pretty sure that approve can be used with --filter and a viewport label e.g. approve --filter=<scenaroName>.*<viewportName> because it is grepping on filename.

And second: in some cases you may be able to avoid writing a config file by using the node invocation e.g. https://github.com/garris/BackstopJS/blob/master/README.md#pass-a-config-object-to-the-command

Just some suggested options.

Cheers

[AdrienLemaire]

Sure, thank you for linking them!
And many thanks for the review, I'll go and update the post right away :)

[AdrienLemaire]

@garris please let me know if you share the links, thanks !

[garris]

Sorry for the delay -- thank you for the reminder! Just added! Cheers