diff --git a/pagy-on-docker/README.md b/pagy-on-docker/README.md
index 9e7577a28..9a80a64f0 100644
--- a/pagy-on-docker/README.md
+++ b/pagy-on-docker/README.md
@@ -106,13 +106,14 @@ If you determine that you need to run the E2E tests, you can choose different wa
1. Remotely in Github Actions CI:
- Just create a PR and all the tests (including the cypress tests) will run on GitHub. Use this option if you don't need to write any js code or tests interactively and the ruby tests pass.
2. Locally on your system:
- - With a cypress desktop app that you can [download](https://download.cypress.io/desktop) and manually run from your system. The doc is available on the cypress site and it requires some basic knowledge of cypress to run the tests.
- - Or with a full cypress install with all its dependencies that you may or may not have already (e.g. node modules). The doc is available on the cypress site and it requires some basic knowledge of cypress to run the tests.
+ - With a full cypress install with all its dependencies that you may or may not have already (e.g. node modules). The doc is available on the cypress site and it requires some basic knowledge of cypress to run the tests.
3. Inside docker:
- With fully automated testing running the E2E tests in headless mode. It requires building only one container and requires no other knowledge about cypress
- Or opening a cypress desktop session from inside the container. It requires a bit of docker setup, but it is a complete installation that avoid polluting your system.
-If you need to edit/develop new the E2E tests, you can use one of the previous points #2 or #3.
+If you need to edit/develop new E2E tests, you can use one of the previous points:
+- the #2 is the easiest to work with but it adds an app and dependencies to your system
+- the #3 is a big download, but it is contained in the docker space (i.e. you can remove it completely when you finished without any left-over in your system), but it may miss a few minor features
### Build Pagy Cypress
diff --git a/pagy-on-docker/pagy-cypress-uid1000.dockerfile b/pagy-on-docker/pagy-cypress-uid1000.dockerfile
index 30cc02d5c..1015ac835 100644
--- a/pagy-on-docker/pagy-cypress-uid1000.dockerfile
+++ b/pagy-on-docker/pagy-cypress-uid1000.dockerfile
@@ -2,7 +2,8 @@ FROM cypress/included:7.2.0
# the upstram dockerfile already provides a node user with UID 1000
# so we configure the image to run as that user
-RUN rm -rf /opt/firefox /usr/bin/firefox \
+RUN apt-get update && apt-get install -y libcanberra-gtk* \
+ && rm -rf /opt/firefox /usr/bin/firefox \
&& ln -s /root/.cache /home/node/.cache \
&& npm install cypress-plugin-snapshots
diff --git a/pagy-on-docker/pagy-cypress.dockerfile b/pagy-on-docker/pagy-cypress.dockerfile
index a44484d94..2c600f688 100644
--- a/pagy-on-docker/pagy-cypress.dockerfile
+++ b/pagy-on-docker/pagy-cypress.dockerfile
@@ -7,7 +7,8 @@ ARG gid
# configure this image to run as a user identical to your host USER
# move test runner binary folder to the user home directory
-RUN groupadd -g $gid $user \
+RUN apt-get update && apt-get install -y libcanberra-gtk* \
+ && groupadd -g $gid $user \
&& useradd -r --no-log-init -u $uid -g $user $group \
&& install -d -m 0755 -o $user -g $user /home/$user \
&& rm -rf /opt/firefox /usr/bin/firefox \
diff --git a/test/e2e/cypress.json b/test/e2e/cypress.json
index 31ae49e25..bb770e181 100644
--- a/test/e2e/cypress.json
+++ b/test/e2e/cypress.json
@@ -1,4 +1,5 @@
{
+ "experimentalStudio": true,
"ignoreTestFiles": [
"**/__snapshots__/*",
"**/__image_snapshots__/*"
diff --git a/test/e2e/cypress/integration/__snapshots__/dummy.spec.js.snap b/test/e2e/cypress/integration/__snapshots__/dummy.spec.js.snap
index 95ebf62dc..362e939ee 100644
--- a/test/e2e/cypress/integration/__snapshots__/dummy.spec.js.snap
+++ b/test/e2e/cypress/integration/__snapshots__/dummy.spec.js.snap
@@ -6,3 +6,12 @@ exports[`Dummy Test > toMatchSnapshot - HTML #0`] = `
semantic uikit
`;
+
+exports[`Test Bootstrap > toMatchSnapshot - HTML #0`] = `
+
+`;
diff --git a/test/e2e/cypress/integration/__snapshots__/dummy2.spec.js.snap b/test/e2e/cypress/integration/__snapshots__/dummy2.spec.js.snap
new file mode 100644
index 000000000..0843ae51e
--- /dev/null
+++ b/test/e2e/cypress/integration/__snapshots__/dummy2.spec.js.snap
@@ -0,0 +1,17 @@
+exports[`Dummy Test > toMatchSnapshot - HTML #0`] = `
+
+`;
+
+exports[`Dummy Test > toMatchSnapshot - HTML #1`] = `
+
+`;
diff --git a/test/e2e/cypress/integration/bootstrap.spec.js b/test/e2e/cypress/integration/bootstrap.spec.js
new file mode 100644
index 000000000..1a60ccd94
--- /dev/null
+++ b/test/e2e/cypress/integration/bootstrap.spec.js
@@ -0,0 +1,26 @@
+///
+
+import { fixCypressSpec } from '../support'
+beforeEach(fixCypressSpec(__filename))
+
+describe('Test Bootstrap', () => {
+ it('toMatchSnapshot - HTML', () => {
+ cy.visit('/bootstrap')
+ .then(() => {
+ cy.get('#site-map').toMatchSnapshot();
+ });
+ });
+
+ /* === Test Created with Cypress Studio === */
+ it('Try Studio', function() {
+ /* ==== Generated with Cypress Studio ==== */
+ cy.visit('/bootstrap');
+ cy.get('#nav > .pagination > :nth-child(4) > .page-link').click();
+ cy.get('#nav-js-responsive > .pagination > :nth-child(8) > .page-link').click();
+ cy.get('.text-primary').click();
+ cy.get('.text-primary').clear();
+ cy.get('.text-primary').type('34{enter}');
+ /* ==== End Cypress Studio ==== */
+ });
+})
+
diff --git a/test/e2e/cypress/integration/dummy.spec.js b/test/e2e/cypress/integration/dummy.spec.js
index 55be76faa..c4734fe08 100644
--- a/test/e2e/cypress/integration/dummy.spec.js
+++ b/test/e2e/cypress/integration/dummy.spec.js
@@ -1,5 +1,8 @@
///
+import { fixCypressSpec } from '../support'
+beforeEach(fixCypressSpec(__filename))
+
describe('Dummy Test', () => {
it('toMatchSnapshot - HTML', () => {
cy.visit('/')
diff --git a/test/e2e/cypress/plugins/index.js b/test/e2e/cypress/plugins/index.js
index 1008f8691..9f73e0c3a 100644
--- a/test/e2e/cypress/plugins/index.js
+++ b/test/e2e/cypress/plugins/index.js
@@ -25,5 +25,19 @@ const { initPlugin } = require('cypress-plugin-snapshots/plugin');
module.exports = (on, config) => {
initPlugin(on, config);
+ /*
+ on('before:browser:launch', (browser = {}, launchOptions) => {
+ // `args` is an array of all the arguments that will
+ // be passed to browsers when it launches
+ // console.log(launchOptions.args) // print all current args
+ if (browser.family === 'chromium' && browser.name !== 'electron') {
+ // fullscreen ad auto open devtools
+ launchOptions.args.push('--start-fullscreen', '--auto-open-devtools-for-tabs')
+ }
+ // whatever you return here becomes the launchOptions
+ return launchOptions
+ })
+ */
+
return config;
-};
+}
diff --git a/test/e2e/cypress/support/index.js b/test/e2e/cypress/support/index.js
index d68db96df..88a451639 100644
--- a/test/e2e/cypress/support/index.js
+++ b/test/e2e/cypress/support/index.js
@@ -18,3 +18,23 @@ import './commands'
// Alternatively you can use CommonJS syntax:
// require('./commands')
+
+
+// Fix for cypress bug affecting cypress-snapshots-plugin
+// https://github.com/meinaart/cypress-plugin-snapshots/issues/10#issuecomment-514459554
+// it requires the following addition at the top of each file:
+// import { fixCypressSpec } from '../support'
+// beforeEach(fixCypressSpec(__filename))
+export const fixCypressSpec = filename => () => {
+ const path = require('path')
+ // const relative = filename.substr(1) // removes leading "/"
+ // we don't need to remove the leading "/"
+ const relative = filename
+ const projectRoot = Cypress.config('projectRoot')
+ const absolute = path.join(projectRoot, relative)
+ Cypress.spec = {
+ absolute,
+ name: path.basename(filename),
+ relative
+ }
+}