e2e tests are not runnable after npm install

[DavidMarquezF]

Description

I encountered some issues when trying to perform the e2e tests.

First of all, I was getting the following error:

Error: Unable to launch browser, error message: Chromium revision is not downloaded. Run "npm install" or "yarn install"

I was able to fix it by using:

node node_modules/puppeteer/install.js

In theory puppeteer should be running this script by default, does this happen to anybody else?

Moreover, when e2e tests are working, they do not pass. I supposed they should pass independently of the machine where they are ran. Do they pass for anyone else?

Steps to Reproduce

1. Clone the apexcharts.js repo
2. npm i
3. npm run test

Expected Behavior

Work out of the box and pass all the tests

Actual Behavior

Doesn't work out of the box and doesn't pass all the tests.

Screenshots

Some tests do not pass but some tests even crash:

104 tests completed in 69 sec.
104 tests failed

area/area-spline: Screenshot changed by 0.29%

area/area-with-missing-data: Screenshot changed by 9.68%

area/area-datetime: Image sizes do not match.
    at pixelmatch (C:\Users\david\Downloads\apexcharts.js\node_modules\pixelmatch\index.js:20:15)
    at processSample (C:\Users\david\Downloads\apexcharts.js\tests\e2e\samples.js:88:18)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async C:\Users\david\Downloads\apexcharts.js\tests\e2e\samples.js:206:7

area/area-with-negative: Screenshot changed by 3.47%

area/area-github-style: Screenshot changed by 0.26%

area/basic-area: Screenshot changed by 3.85%

area/stacked-area: Screenshot changed by 0.43%

area/timeseries-with-irregular-data: Screenshot changed by 5.35%

bar/bar-with-custom-data-labels: Screenshot changed by 3.15%

bar/bar-with-images: Screenshot changed by 27.48%

bar/bar-with-markers: Screenshot changed by 0.40%

bar/bar-with-negative: Screenshot changed by 13.34%

bar/basic-bar: Screenshot changed by 0.58%

bar/grouped-bar: Screenshot changed by 0.42%

bar/patterned-bar: Screenshot changed by 25.74%

bar/reversed-bar: Screenshot changed by 1.04%

bar/stacked-bar-100: Screenshot changed by 8.82%

bar/stacked-bar: Screenshot changed by 7.59%

boxPlot/basic: Screenshot changed by 3.61%

boxPlot/boxplot-scatter: Screenshot changed by 4.87%

boxPlot/horizontal-boxplot: Screenshot changed by 5.49%

bubble/3d-bubble: Screenshot changed by 11.49%

bubble/simple-bubble: Screenshot changed by 6.97%

candlestick/basic: Screenshot changed by 3.25%

candlestick/candlestick-bar: Screenshot changed by 0.50%

candlestick/candlestick-category: Screenshot changed by 5.89%

candlestick/candlestick-line: Screenshot changed by 4.45%

column/basic-column: Screenshot changed by 1.31%

column/column-with-data-labels: Screenshot changed by 0.91%

column/column-with-markers: Screenshot changed by 0.41%

column/column-with-negative: Screenshot changed by 0.37%

column/column-with-rotated-data-labels: Screenshot changed by 2.73%

column/column-with-rotated-labels: Screenshot changed by 2.44%

column/data-color: Screenshot changed by 0.26%

column/distributed-columns: Screenshot changed by 0.46%

column/dynamic-loaded-chart: Screenshot changed by 2.00%

column/histogram: Screenshot changed by 0.12%

column/range-column: Screenshot changed by 0.28%

column/stacked-column-100: Screenshot changed by 1.02%

column/stacked-column-with-line: Screenshot changed by 0.55%

column/stacked-column: Screenshot changed by 0.58%

heatmap/basic: Screenshot changed by 4.41%

heatmap/color-range: Screenshot changed by 3.98%

heatmap/image-fill: Screenshot changed by 26.76%

heatmap/multiple-color-scales-flipped: Screenshot changed by 4.69%

heatmap/multiple-color: Screenshot changed by 6.15%

heatmap/rounded: Screenshot changed by 8.81%

line/basic-line: Screenshot changed by 3.41%

line/brush-charts: Screenshot changed by 0.52%

line/dashed-line: Screenshot changed by 4.32%

line/gradient-line: Screenshot changed by 6.33%

line/line-with-annotations: Screenshot changed by 5.05%

line/line-with-data-labels: Screenshot changed by 8.27%

line/line-with-image: Screenshot changed by 5.40%

line/line-with-missing-data: Screenshot changed by 3.00%

line/logarithmic-line: Screenshot changed by 5.93%

line/realtime: Screenshot changed by 7.88%

line/stepline: Screenshot changed by 4.11%

line/zoomable-timeseries: Screenshot changed by 3.56%

line/syncing-charts: Screenshot changed by 0.59%

misc/annotations-example: Screenshot changed by 0.70%

misc/axios: Screenshot changed by 3.01%

misc/custom-legend: Screenshot changed by 0.90%

misc/jquery: Screenshot changed by 3.01%

misc/minMaxPoints: Screenshot changed by 0.39%

misc/range-annotations-inverted-axis-example: Screenshot changed by 0.95%

mixed/line-area: Screenshot changed by 0.93%

mixed/line-column-area: Screenshot changed by 0.92%

mixed/line-column: Screenshot changed by 3.65%

mixed/line-scatter: Screenshot changed by 0.25%

mixed/multiple-yaxes: Screenshot changed by 7.24%

pie/donut-update: Image sizes do not match.
    at pixelmatch (C:\Users\david\Downloads\apexcharts.js\node_modules\pixelmatch\index.js:20:15)
    at processSample (C:\Users\david\Downloads\apexcharts.js\tests\e2e\samples.js:88:18)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async C:\Users\david\Downloads\apexcharts.js\tests\e2e\samples.js:206:7

pie/donut-with-pattern: Image sizes do not match.
    at pixelmatch (C:\Users\david\Downloads\apexcharts.js\node_modules\pixelmatch\index.js:20:15)
    at processSample (C:\Users\david\Downloads\apexcharts.js\tests\e2e\samples.js:88:18)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async C:\Users\david\Downloads\apexcharts.js\tests\e2e\samples.js:206:7

pie/gradient-donut: Image sizes do not match.
    at pixelmatch (C:\Users\david\Downloads\apexcharts.js\node_modules\pixelmatch\index.js:20:15)
    at processSample (C:\Users\david\Downloads\apexcharts.js\tests\e2e\samples.js:88:18)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async C:\Users\david\Downloads\apexcharts.js\tests\e2e\samples.js:206:7

pie/monochrome-pie: Image sizes do not match.
    at pixelmatch (C:\Users\david\Downloads\apexcharts.js\node_modules\pixelmatch\index.js:20:15)
    at processSample (C:\Users\david\Downloads\apexcharts.js\tests\e2e\samples.js:88:18)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async C:\Users\david\Downloads\apexcharts.js\tests\e2e\samples.js:206:7

pie/pie-with-image: Screenshot changed by 1.34%

pie/semi-donut: Screenshot changed by 2.86%

pie/simple-donut: Screenshot changed by 2.06%

pie/simple-pie: Screenshot changed by 1.82%

polarArea/basic-polar-area: Screenshot changed by 1.32%

polarArea/polar-area-monochrome: Screenshot changed by 0.37%

radar/basic-radar: Screenshot changed by 2.82%

radar/radar-multiple-series: Screenshot changed by 4.26%

radar/radar-with-polygon-fill: Screenshot changed by 4.69%

radialBar/circle-chart-multiple: Screenshot changed by 0.04%

radialBar/circle-chart-with-image: Screenshot changed by 0.04%

radialBar/circle-chart: Screenshot changed by 0.04%

radialBar/circle-custom-angle: Screenshot changed by 0.33%

radialBar/circle-gradient: Screenshot changed by 0.04%

radialBar/semi-circle-chart: Screenshot changed by 0.11%

radialBar/stroked-gauge: Screenshot changed by 0.09%

scatter/scatter-basic: Screenshot changed by 0.46%

scatter/scatter-datetime: Screenshot changed by 0.54%

sparklines/sparklines: Screenshot changed by 1.12%

scatter/scatter-images: Screenshot changed by 0.38%

timelines/advanced: Screenshot changed by 0.36%

timelines/controlling-colors: Screenshot changed by 0.68%

timelines/multi-series-group-rows: Screenshot changed by 1.26%

timelines/multi-series: Screenshot changed by 0.55%

timelines/simple: Screenshot changed by 0.42%

treemap/basic: Screenshot changed by 2.66%

treemap/color-scale: Screenshot changed by 2.45%

treemap/distributed: Screenshot changed by 3.02%

treemap/multi-dimensional: Screenshot changed by 2.04%
Error: Code coverage report failed to generate
    at processSamples (C:\Users\david\Downloads\apexcharts.js\tests\e2e\samples.js:264:13)

[maciej-ka]

Hi,

Good to hear that I'm not the only one having these problems.

I recently added a proposal for updating docs on how to contribute https://github.com/apexcharts/apexcharts.js/pull/3951/files#diff-eca12c0a30e25b4b46522ebf89465a03ba72a03f540796c979137931d8f92055R102

There, I assumed that the screenshot tests might fail because of differences between OS versions and browser versions. This assumption is based on such an experience in one of my projects, where we introduced screenshot tests and immediately had this problem, that small differences between developer machines would produce slightly different images.

As a solution, I had an idea, that screenshot snapshots could be updated before working on contribution so that they can be later used to trace the impact of code changes in the visible result. However, even after running e2e:update, I still get these errors :/ and I have no idea how to fix it.

If you would have any suggestions on how to update these docs, I will welcome it.