generator-nitro 7.3.0 → 7.4.0

package/generators/app/templates/CUTAWAY.gitignore

@@ -40,11 +40,13 @@ debug.log
 /project/tmp
 /public/assets
 /public/proto
-/public/reports
+/public/reports/**/*
+!/public/reports/lighthouse/
 /src/patterns/**/template/*.js
 /src/patterns/**/template/partial/*.js
 /tests/cypress/cypress/screenshots
 /tests/cypress/cypress/videos
+/tests/playwright/test-results/
 
 # allow
 !.gitkeep

package/generators/app/templates/CUTAWAYpackage.json

@@ -6,8 +6,8 @@
   "private": true,
   "author": "The Nitro Team",
   "engines": {
-	  "node": ">=14.15.0 <19",
-	  "npm": ">=6.14.8 <10"
+    "node": ">=14.15.0 <19",
+    "npm": ">=6.14.8 <10"
   },
   "scripts": {
     "\n# PROJECT ------- ": "",
@@ -23,25 +23,30 @@
     "postinstall": "<% if (git.root) { %>cd <%= git.root %> && husky install <% if (git.project) { %><%= git.project %>/.husky && cd <%= git.project %> <% } %>&& <% } %><% if (options.themes) { %>npm rebuild node-sass && <% } %>env-linter<% if (git.root) { %> --hooksInstalled<% } %> --saveExact --dependenciesExactVersion --lts",
     "\n# LINT/TEST ------- ": "",
     "check-node-version": "check-node-version --print --package",
-    "cypress-test": "npm run build && cross-env PORT=8888 NITRO_MODE=test npm-run-all --parallel --race test:cypress:serve cypress-test:open",
+    "cypress-test": "npm run build && cross-env PORT=8888 NITRO_MODE=test npm-run-all --parallel --race prod:serve cypress-test:open",
     "cypress-test:open": "cypress open --project ./tests/cypress/ --e2e --browser chrome",
-    "lighthouse-test": "npm run build && cross-env PORT=8890 NITRO_MODE=test npm-run-all --parallel --race lighthouse-test:*",
-    "lighthouse-test:serve": "npm run prod:serve",
-    "lighthouse-test:run": "lighthouse http://localhost:8890/<% if (options.exampleCode) { %>example-patterns<% } else { %>index<% } %> --quiet --configPath=./tests/lighthouse/lighthouse.config.js --output-path=./public/reports/lighthouse/report.html --view",
+    "lighthouse-test": "npm run build && cross-env PORT=8889 NITRO_MODE=test npm-run-all --parallel --race prod:serve lighthouse-test:run",
+    "lighthouse-test:run": "lighthouse http://localhost:8889/<% if (options.exampleCode) { %>example-patterns<% } else { %>index<% } %> --quiet --configPath=./tests/lighthouse/lighthouse.config.js --output-path=./public/reports/lighthouse/report.html --view",
     "lint": "npm-run-all lint:*",
     "lint:css": "stylelint src/**/*.*ss --allow-empty-input",
     "lint:data": "nitro-app-validate-pattern-data",
     "lint:html": "gulp lint-html",
     "lint:js": "eslint ./src --ext <% if (options.jsCompiler === 'js') { %>.js,.jsx<% } else { %>.ts,.tsx<% } %>",
     "lint:license": "license-checker --production --summary --exclude \"Apache-2.0, BSD, ISC, LGPL, MIT, MPL\" --failOn \"AGPL; EPL; GPL\"",
+    "playwright-test": "cross-env PORT=8890 NITRO_MODE=test playwright test --config=tests/playwright/playwright.config.ts",
+    "playwright-test-generate": "cross-env PORT=8891 NITRO_MODE=test npm-run-all --parallel --race prod:serve playwright-test-generate:codegen",
+    "playwright-test-generate:codegen": "playwright codegen http://localhost:8891",
     "prettier": "prettier --write \"**/*.*(js|jsx|ts|tsx|json|md|mdx|graphql|gql|yml|yaml)\"",
     "test": "npm-run-all test:*",
     "test:lint": "npm run lint",
-    "test:cypress": "npm run build && cross-env PORT=8888 NITRO_MODE=test npm-run-all --parallel --race test:cypress:*",
-    "test:cypress:serve": "npm run prod:serve",
-    "test:cypress:test": "cypress run --project ./tests/cypress/",
+    "test:build": "npm run build",
+    "test:e2e": "cross-env PORT=8899 NITRO_MODE=test npm-run-all --parallel --race test:e2e:*",
+    "test:e2e:serve": "npm run prod:serve",
+    "test:e2e:run": "npm-run-all --serial test:e2e:run:*",
+    "test:e2e:run:cypress": "cypress run --project ./tests/cypress/",
+    "test:e2e:run:playwright": "playwright test --config=tests/playwright/playwright.config.ts",
     "visual-approve": "backstop approve --config=tests/backstop/backstop.config.js --docker",
-    "visual-test": "npm run build && cross-env PORT=8889 npm-run-all --parallel --race visual-test:*",
+    "visual-test": "npm run build && cross-env PORT=8892 npm-run-all --parallel --race visual-test:*",
     "visual-test:serve": "npm run prod:serve",
     "visual-test:test": "backstop test --config=tests/backstop/backstop.config.js --docker",
     "\n# BUILD/RELEASE ------- ": "",
@@ -84,7 +89,7 @@
     "@gondel/core": "1.2.7",
     "@gondel/plugin-hot": "1.2.7",
     "bootstrap": "5.2.3",<% } %>
-    "core-js": "3.29.0"<% if (options.exampleCode) { %>,
+    "core-js": "3.30.0"<% if (options.exampleCode) { %>,
     "flatpickr": "4.6.13",
     "handlebars": "4.7.7",
     "jquery": "3.6.4",
@@ -95,7 +100,7 @@
     "svg4everybody": "2.1.9"<% } %>
   },
   "devDependencies": {<% if (options.jsCompiler === 'js') { %>
-    "@babel/eslint-parser": "7.19.1",<% } %>
+    "@babel/eslint-parser": "7.21.3",<% } %>
     "@khanacademy/tota11y": "0.2.0",
     "@merkle-open/eslint-config": "1.0.0",
     "@merkle-open/html-validate-config": "1.0.1",
@@ -105,17 +110,18 @@
     "@nitro/app": "<%= version %>",
     "@nitro/exporter": "<%= version %>",
     "@nitro/gulp": "<%= version %>",
-    "@nitro/webpack": "<%= version %>",<% if (options.jsCompiler === 'ts') { %>
+    "@nitro/webpack": "<%= version %>",
+    "@playwright/test": "1.32.2",<% if (options.jsCompiler === 'ts') { %>
     "@types/bootstrap": "5.2.6",<% if (options.exampleCode ) { %>
     "@types/jquery": "3.5.16",<% } %>
     "@types/svg4everybody": "2.1.2",
     "@types/webpack-env": "1.18.0",<% } %>
-    "backstopjs": "6.1.4",
+    "backstopjs": "6.2.0",
     "check-node-version": "4.2.1",
     "commitizen": "4.3.0",
     "config": "3.3.9",
     "cross-env": "7.0.3",
-    "cypress": "12.7.0",
+    "cypress": "12.9.0",
     "cz-conventional-changelog": "3.3.0",
     "env-linter": "1.0.0",
     "eslint": "7.32.0",
@@ -123,16 +129,16 @@
     "extend": "3.0.2",
     "generator-nitro": "<%= version %>",
     "gulp": "4.0.2",
+    "html-validate": "7.14.0",
     "husky": "8.0.3",
-    "html-validate": "7.13.3",
     "license-checker": "25.0.1",
-    "lighthouse": "10.0.2",
+    "lighthouse": "10.1.0",
     "lint-staged": "13.2.0",<% if (options.themes) { %>
     "node-sass": "8.0.0",<% } %>
-    "npm-check-updates": "16.7.12",
+    "npm-check-updates": "16.10.1",
     "npm-run-all": "4.1.5",
-    "prettier": "2.8.4",
-    "rimraf": "4.4.0",
+    "prettier": "2.8.7",
+    "rimraf": "4.4.1",
     "stylelint": "14.16.1",<% if (options.jsCompiler === 'ts') { %>
     "typescript": "4.9.5",<% } %>
     "webpack-cli": "4.10.0",

package/generators/app/templates/config/default.js

@@ -10,9 +10,6 @@ const baseConfig = require('@nitro/app/app/core/config');
 const defaultConfig = {
 	code: {
 		validation: {
-			eslint: {
-				live: false,
-			},
 			htmllint: {
 				// enabling this live validation slows down rendering
 				live: false,
@@ -22,9 +19,6 @@ const defaultConfig = {
 				logMissingSchemaAsError: false,
 				logMissingSchemaAsWarning: true,
 			},
-			stylelint: {
-				live: false,
-			},
 		},
 	},
 	nitro: {

package/generators/app/templates/config/webpack/options.js

@@ -4,12 +4,9 @@ const theme = process.env.THEME ? process.env.THEME : validThemes.find((theme) =
 const options = {
 	rules: {
 		<% if (options.jsCompiler === 'ts') { %>js: false,
-		ts: true,<% } else { %>js: {
-			eslint: config.get('code.validation.eslint.live'),
-		},
+		ts: true,<% } else { %>js: true,
 		ts: false,<% } %>
-		scss: {
-			stylelint: config.get('code.validation.stylelint.live'),<% if (options.themes) { %>
+		scss: {<% if (options.themes) { %>
 			implementation: require('node-sass'),<% } %>
 		},
 		hbs: <% if (options.clientTpl) { %>true<% } else { %>false<% } %>,

package/generators/app/templates/project/docs/nitro-config.md

@@ -12,14 +12,6 @@ the main nodes from nitro: `code`, `nitro`,`server`, `gulp`, `feature`, `exporte
 
 ### Validation
 
-#### `code.validation.eslint`
-
-Type: Object
-
-- `code.validation.eslint.live` - default: false
-
-Enable/disable JavaScript linting on change.
-
 #### `code.validation.htmllint`
 
 Type: Object
@@ -37,14 +29,6 @@ Type: Object
 - `code.validation.jsonSchema.logMissingSchemaAsError` - default: false
 - `code.validation.jsonSchema.logMissingSchemaAsWarning` - default: true
 
-#### `code.validation.stylelint`
-
-Type: Object
-
-- `code.validation.stylelint.live` - default: false
-
-Enable/disable CSS linting on change.
-
 ## Nitro
 
 The node `nitro` contains following properties

package/generators/app/templates/project/docs/nitro.md

@@ -12,7 +12,7 @@ Nitro is simple, fast and flexible. Use this app for all your frontend work.
 - Webpack Builder with HMR
 - Gulp Tasks for additional functionality
 - Linting, Source Maps, PostCSS & Browsersync
-- Setup for e2e and visual regression testing (cypress, backstopjs) & lighthouse
+- Setup for e2e and visual regression testing (playwright, cypress, backstopjs) & lighthouse
 - Pattern generator<% if (options.clientTpl) { %>
 - [Client side templates](./client-templates.md)<% } %><% if (options.exporter) { %>
 - [Static Exports](./nitro-exporter.md)<% } %>

package/generators/app/templates/tests/backstop/engine_scripts/playwright/clickAndHoverHelper.js

@@ -0,0 +1,43 @@
+module.exports = async (page, scenario) => {
+	const hoverSelector = scenario.hoverSelectors || scenario.hoverSelector;
+	const clickSelector = scenario.clickSelectors || scenario.clickSelector;
+	const keyPressSelector = scenario.keyPressSelectors || scenario.keyPressSelector;
+	const scrollToSelector = scenario.scrollToSelector;
+	const postInteractionWait = scenario.postInteractionWait; // selector [str] | ms [int]
+
+	if (keyPressSelector) {
+		for (const keyPressSelectorItem of [].concat(keyPressSelector)) {
+			await page.waitForSelector(keyPressSelectorItem.selector);
+			await page.type(keyPressSelectorItem.selector, keyPressSelectorItem.keyPress);
+		}
+	}
+
+	if (hoverSelector) {
+		for (const hoverSelectorIndex of [].concat(hoverSelector)) {
+			await page.waitForSelector(hoverSelectorIndex);
+			await page.hover(hoverSelectorIndex);
+		}
+	}
+
+	if (clickSelector) {
+		for (const clickSelectorIndex of [].concat(clickSelector)) {
+			await page.waitForSelector(clickSelectorIndex);
+			await page.click(clickSelectorIndex);
+		}
+	}
+
+	if (postInteractionWait) {
+		if (parseInt(postInteractionWait) > 0) {
+			await page.waitForTimeout(postInteractionWait);
+		} else {
+			await page.waitForSelector(postInteractionWait);
+		}
+	}
+
+	if (scrollToSelector) {
+		await page.waitForSelector(scrollToSelector);
+		await page.evaluate(scrollToSelector => {
+			document.querySelector(scrollToSelector).scrollIntoView();
+		}, scrollToSelector);
+	}
+};

package/generators/app/templates/tests/backstop/engine_scripts/playwright/interceptImages.js

@@ -0,0 +1,31 @@
+/**
+ * INTERCEPT IMAGES
+ * Listen to all requests. If a request matches IMAGE_URL_RE
+ * then stub the image with data from IMAGE_STUB_URL
+ *
+ * Use this in an onBefore script E.G.
+  ```
+  module.exports = async function(page, scenario) {
+    require('./interceptImages')(page, scenario);
+  }
+  ```
+ *
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const IMAGE_URL_RE = /\.gif|\.jpg|\.png/i;
+const IMAGE_STUB_URL = path.resolve(__dirname, '../../imageStub.jpg');
+const IMAGE_DATA_BUFFER = fs.readFileSync(IMAGE_STUB_URL);
+const HEADERS_STUB = {};
+
+module.exports = async function (page, scenario) {
+	page.route(IMAGE_URL_RE, route => {
+		route.fulfill({
+			body: IMAGE_DATA_BUFFER,
+			headers: HEADERS_STUB,
+			status: 200
+		});
+	});
+};

package/generators/app/templates/tests/backstop/engine_scripts/playwright/loadCookies.js

@@ -0,0 +1,16 @@
+const fs = require('fs');
+
+module.exports = async (browserContext, scenario) => {
+	let cookies = [];
+	const cookiePath = scenario.cookiePath;
+
+	// Read Cookies from File, if exists
+	if (fs.existsSync(cookiePath)) {
+		cookies = JSON.parse(fs.readFileSync(cookiePath));
+	}
+
+	// Add cookies to browser
+	browserContext.addCookies(cookies);
+
+	console.log('Cookie state restored with:', JSON.stringify(cookies, null, 2));
+};

package/generators/app/templates/tests/backstop/engine_scripts/playwright/onBefore.js

@@ -0,0 +1,3 @@
+module.exports = async (page, scenario, viewport, isReference, browserContext) => {
+	await require('./loadCookies')(browserContext, scenario);
+};

package/generators/app/templates/tests/backstop/engine_scripts/playwright/onReady.js

@@ -0,0 +1,6 @@
+module.exports = async (page, scenario, viewport, isReference, browserContext) => {
+	console.log('SCENARIO > ' + scenario.label);
+	await require('./clickAndHoverHelper')(page, scenario);
+
+	// add more ready handlers here...
+};

package/generators/app/templates/tests/backstop/engine_scripts/playwright/overrideCSS.js

@@ -0,0 +1,27 @@
+/**
+ * OVERRIDE CSS
+ * Apply this CSS to the loaded page, as a way to override styles.
+ *
+ * Use this in an onReady script E.G.
+  ```
+  module.exports = async function(page, scenario) {
+    await require('./overrideCSS')(page, scenario);
+  }
+  ```
+ *
+ */
+
+const BACKSTOP_TEST_CSS_OVERRIDE = `
+  html {
+    background-image: none;
+  }
+`;
+
+module.exports = async (page, scenario) => {
+	// inject arbitrary css to override styles
+	await page.addStyleTag({
+		content: BACKSTOP_TEST_CSS_OVERRIDE
+	});
+
+	console.log('BACKSTOP_TEST_CSS_OVERRIDE injected for: ' + scenario.label);
+};

package/generators/app/templates/tests/backstop/engine_scripts/puppet/clickAndHoverHelper.js

@@ -1,39 +1,39 @@
-module.exports = async (page, scenario) => {
-	const hoverSelector = scenario.hoverSelectors || scenario.hoverSelector;
-	const clickSelector = scenario.clickSelectors || scenario.clickSelector;
-	const keyPressSelector = scenario.keyPressSelectors || scenario.keyPressSelector;
-	const scrollToSelector = scenario.scrollToSelector;
-	const postInteractionWait = scenario.postInteractionWait; // selector [str] | ms [int]
-
-	if (keyPressSelector) {
-		for (const keyPressSelectorItem of [].concat(keyPressSelector)) {
-			await page.waitFor(keyPressSelectorItem.selector);
-			await page.type(keyPressSelectorItem.selector, keyPressSelectorItem.keyPress);
-		}
-	}
-
-	if (hoverSelector) {
-		for (const hoverSelectorIndex of [].concat(hoverSelector)) {
-			await page.waitFor(hoverSelectorIndex);
-			await page.hover(hoverSelectorIndex);
-		}
-	}
-
-	if (clickSelector) {
-		for (const clickSelectorIndex of [].concat(clickSelector)) {
-			await page.waitFor(clickSelectorIndex);
-			await page.click(clickSelectorIndex);
-		}
-	}
-
-	if (postInteractionWait) {
-		await page.waitFor(postInteractionWait);
-	}
-
-	if (scrollToSelector) {
-		await page.waitFor(scrollToSelector);
-		await page.evaluate((scrollToSelector) => {
-			document.querySelector(scrollToSelector).scrollIntoView();
-		}, scrollToSelector);
-	}
-};
+module.exports = async (page, scenario) => {
+	const hoverSelector = scenario.hoverSelectors || scenario.hoverSelector;
+	const clickSelector = scenario.clickSelectors || scenario.clickSelector;
+	const keyPressSelector = scenario.keyPressSelectors || scenario.keyPressSelector;
+	const scrollToSelector = scenario.scrollToSelector;
+	const postInteractionWait = scenario.postInteractionWait; // selector [str] | ms [int]
+
+	if (keyPressSelector) {
+		for (const keyPressSelectorItem of [].concat(keyPressSelector)) {
+			await page.waitForSelector(keyPressSelectorItem.selector);
+			await page.type(keyPressSelectorItem.selector, keyPressSelectorItem.keyPress);
+		}
+	}
+
+	if (hoverSelector) {
+		for (const hoverSelectorIndex of [].concat(hoverSelector)) {
+			await page.waitForSelector(hoverSelectorIndex);
+			await page.hover(hoverSelectorIndex);
+		}
+	}
+
+	if (clickSelector) {
+		for (const clickSelectorIndex of [].concat(clickSelector)) {
+			await page.waitForSelector(clickSelectorIndex);
+			await page.click(clickSelectorIndex);
+		}
+	}
+
+	if (postInteractionWait) {
+		await page.waitForTimeout(postInteractionWait);
+	}
+
+	if (scrollToSelector) {
+		await page.waitForSelector(scrollToSelector);
+		await page.evaluate((scrollToSelector) => {
+			document.querySelector(scrollToSelector).scrollIntoView();
+		}, scrollToSelector);
+	}
+};

package/generators/app/templates/tests/backstop/engine_scripts/puppet/ignoreCSP.js

@@ -36,7 +36,7 @@ module.exports = async function (page, scenario) {
 			const cookies = cookiesList.map((cookie) => `${cookie.name}=${cookie.value}`).join('; ');
 			const headers = Object.assign(request.headers(), { cookie: cookies });
 			const options = {
-				headers: headers,
+				headers,
 				body: request.postData(),
 				method: request.method(),
 				follow: 20,

package/generators/app/templates/tests/cypress/cypress/e2e/pages/404.cy.js

@@ -1,31 +1,34 @@
 /// <reference types="cypress" />
 
+const page404Url = '/404';
+const nonExistingUrl = '/pagenotfound';
+
 // test 404 page
 context('404 Page Test', () => {
 	beforeEach(() => {
-		cy.visit('/404');
+		cy.visit(page404Url);
 	});
 
 	describe('HTML Head', () => {
-		it('charset meta tag is UTF-8', () => {
+		it('Character encoding is UTF-8', () => {
 			cy.document().should('have.property', 'charset').and('eq', 'UTF-8');
 		});
 
-		it('title includes 404', () => {
+		it('Title includes 404', () => {
 			cy.title().should('include', '404');
 		});
 	});
 
 	describe('Root DOM node', () => {
-		it('has lang attribute', () => {
+		it('Has lang attribute', () => {
 			cy.root().should('match', 'html').and('have.attr', 'lang', 'en');
 		});
 	});
 
 	describe('Status Code', () => {
-		it('should be 404 for a non existing page', () => {
+		it('Should be 404 for a non existing page', () => {
 			cy.request({
-				url: '/pagenotfound',
+				url: nonExistingUrl,
 				failOnStatusCode: false,
 			}).then((response) => {
 				expect(response.status).to.eq(404);

package/generators/app/templates/tests/cypress/cypress/e2e/pages/index.cy.js

@@ -7,11 +7,11 @@ context('Index Page Test', () => {
 	});
 
 	describe('Location', () => {
-		it('has no hash', () => {
+		it('Has no hash', () => {
 			cy.hash().should('be.empty');
 		});
 
-		it('passes window.location tests', () => {
+		it('Passes window.location tests', () => {
 			const baseUrl = Cypress.config().baseUrl;
 
 			cy.location().should((location) => {
@@ -25,17 +25,17 @@ context('Index Page Test', () => {
 	});
 
 	describe('HTML Head', () => {
-		it('charset meta tag is UTF-8', () => {
+		it('Character encoding is UTF-8', () => {
 			cy.document().should('have.property', 'charset').and('eq', 'UTF-8');
 		});
 
-		it('title includes index page', () => {
+		it('Title includes index page', () => {
 			cy.title().should('include', 'index page');
 		});
 	});
 
 	describe('Root DOM node', () => {
-		it('has lang attribute', () => {
+		it('Has correct lang attribute', () => {
 			cy.root().should('match', 'html').and('have.attr', 'lang', 'en');
 		});
 	});

package/generators/app/templates/tests/cypress/readme.md

@@ -1,6 +1,6 @@
 # Cypress e2e Tests
 
-End to end testing with cypress.
+End-to-end testing with cypress.
 
 [More about cypress](https://www.npmjs.com/package/cypress)
 
@@ -16,7 +16,7 @@ We use the [default configuration](https://docs.cypress.io/guides/core-concepts/
 Use following npm scripts for your test workflow:
 
 - `npm run cypress-test` to run full cypress test suite (use this to set up your tests)
-- `npm run test:cypress` to run cypress tests in headless mode (use this for ci)
+- `npm test` cypress tests are run in the test chain
 
 ## CI setup
 

package/generators/app/templates/tests/playwright/e2e/pages/404.spec.ts

@@ -0,0 +1,41 @@
+import { test, expect } from '@playwright/test';
+
+const page404Url = '/404';
+const nonExistingUrl = '/pagenotfound';
+
+test.describe('404 Page', () => {
+	test.beforeEach(async ({ page }) => {
+		await page.goto(page404Url);
+	});
+
+	test.describe('HTML Head', () => {
+		test('character encoding is UTF-8', async ({ page }) => {
+			const charset = await page.evaluate(() => window.document.characterSet);
+			expect(charset).toEqual('UTF-8');
+		});
+
+		test('Title includes 404', async ({ page }) => {
+			await expect(page).toHaveTitle(/404/);
+		});
+	});
+
+	test.describe('Root DOM node', () => {
+		test('Has correct lang attribute', async ({ page }) => {
+			const lang = await page.locator('html').getAttribute('lang');
+			expect(lang).toEqual('en');
+		});
+	});
+});
+
+test.describe('404 Page', () => {
+	test.describe('Status Code', () => {
+		test('Should be 404 for a non existing page', async ({ page }) => {
+			page.on('response', (response) => {
+				if (response.url().includes(nonExistingUrl)) {
+					expect(response.status()).toBe(404);
+				}
+			});
+			await page.goto(nonExistingUrl);
+		});
+	});
+});

package/generators/app/templates/tests/playwright/e2e/pages/index.spec.ts

@@ -0,0 +1,42 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Index Page', () => {
+	test.beforeEach(async ({ page }) => {
+		await page.goto('/index');
+	});
+
+	test.describe('Location', () => {
+		test('Has no hash', async ({ page }) => {
+			expect(page.url().includes('#')).toBeFalsy();
+		});
+
+		test('Passes window.location tests', async ({ page }, testInfo) => {
+			const baseUrl = testInfo.project.use.baseURL;
+			const location = await page.evaluate(() => window.location);
+
+			expect(location.hash).toEqual('');
+			expect(location.href).toEqual(`${baseUrl}/index`);
+			expect(location.origin).toEqual(`${baseUrl}`);
+			expect(location.pathname).toEqual('/index');
+			expect(location.search).toEqual('');
+		});
+	});
+
+	test.describe('HTML Head', () => {
+		test('Character encoding is UTF-8', async ({ page }) => {
+			const charset = await page.evaluate(() => window.document.characterSet);
+			expect(charset).toEqual('UTF-8');
+		});
+
+		test('Title includes index page', async ({ page }) => {
+			await expect(page).toHaveTitle(/index page/);
+		});
+	});
+
+	test.describe('Root DOM node', () => {
+		test('Has correct lang attribute', async ({ page }) => {
+			const lang = await page.locator('html').getAttribute('lang');
+			expect(lang).toEqual('en');
+		});
+	});
+});

package/generators/app/templates/tests/playwright/playwright.config.ts

@@ -0,0 +1,108 @@
+import { defineConfig, devices } from '@playwright/test';
+
+const port = process.env.PORT || 8080;
+
+/**
+ * See https://playwright.dev/docs/test-configuration
+ */
+export default defineConfig({
+	testDir: './e2e',
+	/* Maximum time one test can run for. */
+	timeout: 30 * 1000,
+	expect: {
+		/**
+		 * Maximum time expect() should wait for the condition to be met.
+		 * For example in `await expect(locator).toHaveText();`
+		 */
+		timeout: 5000,
+	},
+	/* Run tests in files in parallel */
+	fullyParallel: true,
+	/* Fail the build on CI if you accidentally left test.only in the source code. */
+	forbidOnly: !!process.env.CI,
+	/* Retry on CI only */
+	retries: process.env.CI ? 2 : 0,
+	/* Opt out of parallel tests on CI. */
+	workers: process.env.CI ? 1 : undefined,
+	/* Reporter to use. See https://playwright.dev/docs/test-reporters */
+	reporter: process.env.CI
+		? [
+			['dot'],
+			[
+				'html',
+				{
+					open: 'never',
+					outputFolder: '../../public/reports/playwright',
+				},
+			],
+		]
+		: [
+			['list'],
+			[
+				'html',
+				{
+					open: 'on-failure',
+					outputFolder: '../../public/reports/playwright',
+				},
+			],
+		],
+	/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+	use: {
+		/* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+		actionTimeout: 0,
+		/* Base URL to use in actions like `await page.goto('/')`. */
+		baseURL: `http://localhost:${port}`,
+		/* Capture screenshot. Defaults to 'off' */
+		screenshot: 'only-on-failure',
+		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+		trace: 'on-first-retry',
+	},
+
+	/* Configure projects for major browsers */
+	projects: [
+		{
+			name: 'chromium',
+			use: { ...devices['Desktop Chrome'] },
+		},
+
+		// {
+		// 	name: 'firefox',
+		// 	use: { ...devices['Desktop Firefox'] },
+		// },
+
+		// {
+		// 	name: 'webkit',
+		// 	use: { ...devices['Desktop Safari'] },
+		// },
+
+		/* Test against mobile viewports. */
+		// {
+		//   name: 'Mobile Chrome',
+		//   use: { ...devices['Pixel 5'] },
+		// },
+		// {
+		//   name: 'Mobile Safari',
+		//   use: { ...devices['iPhone 12'] },
+		// },
+
+		/* Test against branded browsers. */
+		// {
+		//   name: 'Microsoft Edge',
+		//   use: { channel: 'msedge' },
+		// },
+		// {
+		//   name: 'Google Chrome',
+		//   use: { channel: 'chrome' },
+		// },
+	],
+
+	/* Folder for test artifacts such as screenshots, videos, traces, etc. */
+	outputDir: 'test-results/',
+
+	/* Run your local dev server before starting the tests */
+	webServer: {
+		command: 'npm run prod:serve',
+		port: Number(port),
+		reuseExistingServer: true,
+	},
+});

package/generators/app/templates/tests/playwright/readme.md

@@ -0,0 +1,25 @@
+# Playwright e2e Tests
+
+End-to-end testing with playwright.
+
+[More about playwright](https://playwright.dev/)
+
+## Directories
+
+- `./e2e` is the place for your tests (you may create subfolders as well)
+
+## Scripts
+
+Use following npm scripts for your test workflow:
+
+- `npm test` playwright tests run in the test chain (this also works well in ci environments)
+- `npm run playwright-test` to run all tests on your local machine
+- `npm run playwright-test-generate` to open the playwright generator (use this to set up your tests)
+
+or [run and generate playwright tests directly in VS Code](https://playwright.dev/docs/codegen#generate-tests-in-vs-code)
+
+## CI setup
+
+Add `CI=true` as environment variable.
+
+More on [configuation for continous integration](https://playwright.dev/docs/ci)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "generator-nitro",
-  "version": "7.3.0",
+  "version": "7.4.0",
   "description": "Yeoman generator for the nitro frontend framework",
   "license": "MIT",
   "repository": "merkle-open/generator-nitro",
@@ -45,11 +45,11 @@
   },
   "devDependencies": {
     "@merkle-open/eslint-config": "1.0.0",
-    "ejs": "3.1.8",
+    "ejs": "3.1.9",
     "eslint": "7.32.0",
     "eslint-plugin-import": "2.27.5",
-    "fs-extra": "11.1.0",
-    "jasmine": "4.5.0",
+    "fs-extra": "11.1.1",
+    "jasmine": "4.6.0",
     "yeoman-assert": "3.1.1",
     "yeoman-test": "6.3.0"
   }