Guidance on running percy in node container (alpine)

[gablittledevshop]

I'm developing a project inside a node container and need to run my tests inside as well, but I keep running into socket errors. I'm using Percy with testcafe and I'm just trying to run a simple test to get started. I'm hoping for some guidance for what packages are required for my image to have this working properly. I'm not an expert in Docker, and searches that I've found have answers for debian but not alpine.

Docker image:

FROM node:12.22-alpine3.13

RUN apk add --update bash \
 make \
 nasm \
 autoconf \
 automake \
 libtool \
 dpkg \
 pkgconfig \
 libpng \
 libpng \
 -dev \
 g++ \
 python3 \
 vips-dev \
 chromium firefox

Here's the output when I try to run the command:

bash-5.1# yarn testDocker
yarn run v1.22.17
$ percy exec --config .percy.yml --verbose -- testcafe chromium:headless ./tests/*
[percy:config] Found config file: .percy.yml (0ms)
[percy:config] Using config:
{
  version: 2,
  snapshot: {
    widths: [
      375,
      1280,
      1920
    ]
  },
  discovery: {
    launchOptions: {
      executable: '/usr/lib/chromium/chrome'
    }
  }
} (26ms)
[percy:client] Creating a new build... (42ms)
[percy:core:browser] Launching browser (649ms)
[percy:core:browser] Browser connected: HeadlessChrome/86.0.4240.111 (497ms)
[percy:core] Percy has started! (2ms)
[percy:cli:exec] Running "testcafe chromium:headless ./tests/visual-regression.js" (0ms)
 Running tests in:
 - Chrome 86.0.4240.111 / Linux 0.0

 MyFixture
[percy:core:snapshot] --------- (8706ms)
[percy:core:snapshot] Handling snapshot: TestCafe Example (0ms)
[percy:core:snapshot] - url: https://devexpress.github.io/testcafe/example/ (0ms)
[percy:core:snapshot] - widths: 375px, 375px, 1280px, 1280px, 1920px, 1920px (1ms)
[percy:core:snapshot] - minHeight: 1024px (0ms)
[percy:core:snapshot] - discovery.allowedHostnames: devexpress.github.io (0ms)
[percy:core:snapshot] - clientInfo: @percy/testcafe/1.0.1 (0ms)
[percy:core:snapshot] - environmentInfo: testcafe/1.17.1 (0ms)
[percy:core:snapshot] - domSnapshot: true (0ms)
[percy:testcafe] Could not take DOM snapshot "TestCafe Example" (119844ms)
[percy:testcafe] Error: socket hang up
    at connResetException (internal/errors.js:609:14)
    at Socket.socketOnEnd (_http_client.js:458:23)
    at Socket.emit (events.js:326:22)
    at Socket.EventEmitter.emit (domain.js:483:12)
    at endReadableNT (_stream_readable.js:1241:12)
    at processTicksAndRejections (internal/process/task_queues.js:84:21) (0ms)
 ✓ Test1


 1 passed (2m 02s)
[percy:core] Processing 1 snapshot...

And then it gets stuck.

Thanks!

[Robdel12]

Hey @gablittledevshop! This will probably be hard to debug, alpine containers typically involve a lot of manual setup, so it could be a whole lot of things in that env that causes issues. Looking at the logs, I see you're setting your own chrome executable.

discovery: {
    launchOptions: {
      executable: '/usr/lib/chromium/chrome'
    }
  }

Which can be fine, but it's a pretty advanced thing to reach for since that impacts how the entire SDK works. Long history story short, changing versions of Chrome the SDK connects to can have a large impact (network interception bugs are plentiful across Chrome versions). I see we're connecting to a pretty old version (Browser connected: HeadlessChrome/86.0.4240.111). That could cause issues and given the error is on DOM POST and there's no asset discovery logs, it makes me think there's issues with the asset discovery browser & intercepting requests. Hard to tell, though. That's where I'd start first at least. 🤨

[gablittledevshop]

Thanks @Robdel12 , the reason why I used my own chrome executable was because I was running into issues with the browser unable to be launched.

$ percy exec --config .percy.yml --verbose -- testcafe chromium:headless ./tests/*
[percy:config] Found config file: .percy.yml (0ms)
[percy:config] Using config:
{
  version: 2,
  snapshot: {
    widths: [
      375,
      1280,
      1920
    ]
  }
} (14ms)
[percy:client] Creating a new build... (36ms)
[percy:core:install] Successfully downloaded Chromium 885264 (21690ms)
[percy:core:browser] Launching browser (33ms)
[percy:core:browser] Closing browser (14ms)
[percy:core:browser] Browser closed (8ms)
[percy:cli:exec] Skipping visual tests (0ms)
[percy:cli:exec] Error: Failed to launch browser. spawn /app/node_modules/@percy/core/.local-chromium/885264/chrome-linux/chrome ENOENT
'


    at /app/node_modules/@percy/core/dist/browser.js:299:23
    at cleanup (/app/node_modules/@percy/core/dist/browser.js:308:9)
    at ChildProcess.handleError (/app/node_modules/@percy/core/dist/browser.js:296:34)
    at ChildProcess.emit (events.js:314:20)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:274:12)
    at onErrorNT (internal/child_process.js:470:16)
    at processTicksAndRejections (internal/process/task_queues.js:84:21) (0ms)
[percy:cli:exec] Running "testcafe chromium:headless ./tests/visual-regression.js" (0ms)
 Running tests in:
 - Chrome 86.0.4240.111 / Linux 0.0

 MyFixture
[percy:utils] Percy is not running, disabling snapshots (0ms)
[percy:utils] Error: connect ECONNREFUSED 127.0.0.1:5338
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1144:16)
    at TCPConnectWrap.callbackTrampoline (internal/async_hooks.js:126:14) (1ms)
 ✓ Test1

Even with the custom executable removed, the chrome version is old but I'm not sure why.

[igorpupkinable]

Hopefully this helps.
Just adapt it to your needs.

Dockerfile

FROM node:lts-alpine

ENV PERCY_ENABLE=0 \
    PERCY_BROWSER_EXECUTABLE="/usr/bin/chromium-browser" \
    PUPPETEER_EXECUTABLE_PATH="/usr/bin/chromium-browser" \
    PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true

RUN apk --update-cache add chromium
WORKDIR /app
COPY package.json yarn.lock .percy.json jest*.js ./
# Cache dependencies.
RUN ["yarn", "install", "--production", "--ignore-optional", "--frozen-lockfile"]
# Copy tests.
COPY --from=builder /app/build/ ./build/ <-- Copy your tests here.
ENTRYPOINT ["yarn", "percy", "exec", "--", "--", "yarn", "run", "exec"]

Build and run tests

docker build --tag styleguide-e2e-tests-alpine .
docker run --rm --env HOST=https://xxx-styleguide.azurewebsites.net --env PERCY_ENABLE=1 --env PERCY_TOKEN=xxx styleguide-e2e-tests-alpine

Result

yarn run v1.22.19
warning From Yarn 1.0 onwards, scripts don't require "--" for options to be forwarded. In a future version, any explicit "--" will be forwarded as-is to the scripts.
$ /app/node_modules/.bin/percy exec -- yarn run exec
[percy] Percy has started!
[percy] Running "yarn run exec"
$ yarn run start --config=jest.build.js --ci --colors
$ jest --runInBand --config=jest.build.js --ci --colors
Executing tests at https://xxx-styleguide.azurewebsites.net
[percy] Snapshot taken: UI Core Components/Input/Range
 PASS  build/ui-core/Input/Range/Range.e2e.js
[percy] Snapshot taken: UI Core Components/Input/RadioGroup
 PASS  build/ui-core/Input/RadioGroup/RadioGroup.e2e.js
 PASS  build/form-components/Field/Number/Number.e2e.js
[percy] Snapshot taken: UI Core Components/Input/Phone
[percy] Snapshot taken: UI Core Components/Input/Phone: country code dropdown open
...
...
...
[percy] Snapshot taken: FE Components/ProductSummary
 PASS  build/fe-components/ProductSummary/ProductSummary/ProductSummary.e2e.js

Test Suites: 1 skipped, 102 passed, 102 of 103 total
Tests:       5 skipped, 210 passed, 215 total
Snapshots:   0 total
Time:        200.841 s
Ran all test suites.
[percy] Uploading 1 snapshot...
[percy] Finalized build #143: https://percy.io/xxx/xxx-styleguide/builds/12345
Done in 208.41s.

Puppeteer & Percy with node:lts vs node:lts-alpine

It saves you ~1.4GB