2025-11-29 07:38:33 +00:00

48 lines
20 KiB
HTML

<!doctype html>
<html lang="en-US" data-theme="light">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="generator" content="VuePress 2.0.0-rc.26" />
<meta name="theme" content="VuePress Theme Hope 2.0.0-rc.98" />
<style>
:root {
--vp-c-bg: #fff;
}
[data-theme="dark"] {
--vp-c-bg: #1b1b1f;
}
html,
body {
background: var(--vp-c-bg);
}
</style>
<script>
const userMode = localStorage.getItem("vuepress-theme-hope-scheme");
const systemDarkMode =
window.matchMedia &&
window.matchMedia("(prefers-color-scheme: dark)").matches;
if (userMode === "dark" || (userMode !== "light" && systemDarkMode)) {
document.documentElement.setAttribute("data-theme", "dark");
}
</script>
<link rel="icon" href="/boilerplate-e2e-cypress-cucumber/favicon.ico"><title>boilerplate-e2e-cypress-cucumber | E2E Cypress Cucumber Boilerplate Documentation</title><meta name="description" content="IT4C - E2E Cypress Cucumber Boilerplate Documentation">
<link rel="preload" href="/boilerplate-e2e-cypress-cucumber/assets/style-Cgku8S1l.css" as="style"><link rel="stylesheet" href="/boilerplate-e2e-cypress-cucumber/assets/style-Cgku8S1l.css">
<link rel="modulepreload" href="/boilerplate-e2e-cypress-cucumber/assets/app-C0vivGk8.js"><link rel="modulepreload" href="/boilerplate-e2e-cypress-cucumber/assets/index.html-DO0wjNCR.js"><link rel="modulepreload" href="/boilerplate-e2e-cypress-cucumber/assets/plugin-vue_export-helper-DlAUqK2U.js">
<link rel="prefetch" href="/boilerplate-e2e-cypress-cucumber/assets/LICENSE.html-BKurzDLI.js" as="script"><link rel="prefetch" href="/boilerplate-e2e-cypress-cucumber/assets/404.html-B5NATH13.js" as="script"><link rel="prefetch" href="/boilerplate-e2e-cypress-cucumber/assets/photoswipe.esm-CKV1Bsxh.js" as="script"><link rel="prefetch" href="/boilerplate-e2e-cypress-cucumber/assets/SearchResult-B1HO2HHb.js" as="script">
</head>
<body>
<div id="app"><!--[--><!--[--><!--[--><span tabindex="-1"></span><a href="#main-content" class="vp-skip-link sr-only">Skip to main content</a><!--]--><!--[--><div class="theme-container external-link-icon has-toc" vp-container><!--[--><header id="navbar" class="vp-navbar" vp-navbar><div class="vp-navbar-start"><button type="button" class="vp-toggle-sidebar-button" title="Toggle Sidebar"><span class="icon"></span></button><!--[--><a class="route-link vp-brand" href="/boilerplate-e2e-cypress-cucumber/" aria-label="Take me home"><img class="vp-nav-logo" src="/boilerplate-e2e-cypress-cucumber/it4c-logo2-clean-bg_alpha-128x128.png" alt><!----><span class="vp-site-name hide-in-pad">E2E Cypress Cucumber Boilerplate Documentation</span></a><!--]--></div><div class="vp-navbar-center"><!----></div><div class="vp-navbar-end"><!--[--><div class="vp-nav-item vp-action"><a class="vp-action-link" href="https://github.com/IT4Change/boilerplate-e2e-cypress-cucumber" target="_blank" rel="noopener noreferrer" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="icon github-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="github icon" name="github" style="width:1.25rem;height:1.25rem;vertical-align:middle;"><path d="M511.957 21.333C241.024 21.333 21.333 240.981 21.333 512c0 216.832 140.544 400.725 335.574 465.664 24.49 4.395 32.256-10.07 32.256-23.083 0-11.69.256-44.245 0-85.205-136.448 29.61-164.736-64.64-164.736-64.64-22.315-56.704-54.4-71.765-54.4-71.765-44.587-30.464 3.285-29.824 3.285-29.824 49.195 3.413 75.179 50.517 75.179 50.517 43.776 75.008 114.816 53.333 142.762 40.79 4.523-31.66 17.152-53.377 31.19-65.537-108.971-12.458-223.488-54.485-223.488-242.602 0-53.547 19.114-97.323 50.517-131.67-5.035-12.33-21.93-62.293 4.779-129.834 0 0 41.258-13.184 134.912 50.346a469.803 469.803 0 0 1 122.88-16.554c41.642.213 83.626 5.632 122.88 16.554 93.653-63.488 134.784-50.346 134.784-50.346 26.752 67.541 9.898 117.504 4.864 129.834 31.402 34.347 50.474 78.123 50.474 131.67 0 188.586-114.73 230.016-224.042 242.09 17.578 15.232 33.578 44.672 33.578 90.454v135.85c0 13.142 7.936 27.606 32.854 22.87C862.25 912.597 1002.667 728.747 1002.667 512c0-271.019-219.648-490.667-490.71-490.667z"></path></svg></a></div><div class="vp-nav-item hide-in-mobile"><button type="button" class="vp-color-mode-switch" id="color-mode-switch"><svg xmlns="http://www.w3.org/2000/svg" class="icon auto-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="auto icon" name="auto" style="display:block;"><path d="M512 992C246.92 992 32 777.08 32 512S246.92 32 512 32s480 214.92 480 480-214.92 480-480 480zm0-840c-198.78 0-360 161.22-360 360 0 198.84 161.22 360 360 360s360-161.16 360-360c0-198.78-161.22-360-360-360zm0 660V212c165.72 0 300 134.34 300 300 0 165.72-134.28 300-300 300z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" class="icon dark-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="dark icon" name="dark" style="display:none;"><path d="M524.8 938.667h-4.267a439.893 439.893 0 0 1-313.173-134.4 446.293 446.293 0 0 1-11.093-597.334A432.213 432.213 0 0 1 366.933 90.027a42.667 42.667 0 0 1 45.227 9.386 42.667 42.667 0 0 1 10.24 42.667 358.4 358.4 0 0 0 82.773 375.893 361.387 361.387 0 0 0 376.747 82.774 42.667 42.667 0 0 1 54.187 55.04 433.493 433.493 0 0 1-99.84 154.88 438.613 438.613 0 0 1-311.467 128z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" class="icon light-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="light icon" name="light" style="display:none;"><path d="M952 552h-80a40 40 0 0 1 0-80h80a40 40 0 0 1 0 80zM801.88 280.08a41 41 0 0 1-57.96-57.96l57.96-58a41.04 41.04 0 0 1 58 58l-58 57.96zM512 752a240 240 0 1 1 0-480 240 240 0 0 1 0 480zm0-560a40 40 0 0 1-40-40V72a40 40 0 0 1 80 0v80a40 40 0 0 1-40 40zm-289.88 88.08-58-57.96a41.04 41.04 0 0 1 58-58l57.96 58a41 41 0 0 1-57.96 57.96zM192 512a40 40 0 0 1-40 40H72a40 40 0 0 1 0-80h80a40 40 0 0 1 40 40zm30.12 231.92a41 41 0 0 1 57.96 57.96l-57.96 58a41.04 41.04 0 0 1-58-58l58-57.96zM512 832a40 40 0 0 1 40 40v80a40 40 0 0 1-80 0v-80a40 40 0 0 1 40-40zm289.88-88.08 58 57.96a41.04 41.04 0 0 1-58 58l-57.96-58a41 41 0 0 1 57.96-57.96z"></path></svg></button></div><!--[--><button type="button" class="slimsearch-button" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" class="icon search-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="search icon"><path d="M192 480a256 256 0 1 1 512 0 256 256 0 0 1-512 0m631.776 362.496-143.2-143.168A318.464 318.464 0 0 0 768 480c0-176.736-143.264-320-320-320S128 303.264 128 480s143.264 320 320 320a318.016 318.016 0 0 0 184.16-58.592l146.336 146.368c12.512 12.48 32.768 12.48 45.28 0 12.48-12.512 12.48-32.768 0-45.28"></path></svg><div class="slimsearch-placeholder">Search</div><div class="slimsearch-key-hints"><kbd class="slimsearch-key">Ctrl</kbd><kbd class="slimsearch-key">K</kbd></div></button><!--]--><!--]--><button type="button" class="vp-toggle-navbar-button" aria-label="Toggle Navbar" aria-expanded="false" aria-controls="nav-screen"><span><span class="vp-top"></span><span class="vp-middle"></span><span class="vp-bottom"></span></span></button></div></header><!----><!--]--><!----><div class="toggle-sidebar-wrapper"><span class="arrow start"></span></div><aside id="sidebar" class="vp-sidebar" vp-sidebar><!----><ul class="vp-sidebar-links"><li><a class="route-link route-link-active auto-link vp-sidebar-link active" href="/boilerplate-e2e-cypress-cucumber/" aria-label="boilerplate-e2e-cypress-cucumber"><!---->boilerplate-e2e-cypress-cucumber<!----></a></li><li><a class="route-link auto-link vp-sidebar-link" href="/boilerplate-e2e-cypress-cucumber/LICENSE.html" aria-label="/LICENSE.html"><!---->/LICENSE.html<!----></a></li></ul><!----></aside><!--[--><main id="main-content" class="vp-page"><!--[--><!----><!----><nav class="vp-breadcrumb disable"></nav><div class="vp-page-title"><h1><!---->boilerplate-e2e-cypress-cucumber</h1><div class="page-info"><!----><!----><!----><!----><span class="page-reading-time-info" aria-label="Reading Time⌛" data-balloon-pos="up"><svg xmlns="http://www.w3.org/2000/svg" class="icon timer-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="timer icon" name="timer"><path d="M799.387 122.15c4.402-2.978 7.38-7.897 7.38-13.463v-1.165c0-8.933-7.38-16.312-16.312-16.312H256.33c-8.933 0-16.311 7.38-16.311 16.312v1.165c0 5.825 2.977 10.874 7.637 13.592 4.143 194.44 97.22 354.963 220.201 392.763-122.204 37.542-214.893 196.511-220.2 389.397-4.661 5.049-7.638 11.651-7.638 19.03v5.825h566.49v-5.825c0-7.379-2.849-13.981-7.509-18.9-5.049-193.016-97.867-351.985-220.2-389.527 123.24-37.67 216.446-198.453 220.588-392.892zM531.16 450.445v352.632c117.674 1.553 211.787 40.778 211.787 88.676H304.097c0-48.286 95.149-87.382 213.728-88.676V450.445c-93.077-3.107-167.901-81.297-167.901-177.093 0-8.803 6.99-15.793 15.793-15.793 8.803 0 15.794 6.99 15.794 15.793 0 80.261 63.69 145.635 142.01 145.635s142.011-65.374 142.011-145.635c0-8.803 6.99-15.793 15.794-15.793s15.793 6.99 15.793 15.793c0 95.019-73.789 172.82-165.96 177.093z"></path></svg><span>About 1 min</span><meta property="timeRequired" content="PT1M"></span><!----><!----></div><hr></div><!----><div class="" vp-content><!----><div id="markdown-content"><h1 id="boilerplate-e2e-cypress-cucumber" tabindex="-1"><a class="header-anchor" href="#boilerplate-e2e-cypress-cucumber"><span>boilerplate-e2e-cypress-cucumber</span></a></h1><p>IT4C Boilerplate for End-to-End Testing with Cypress utilizing:</p><ul><li><a href="https://github.com/marketplace/actions/cypress-io" target="_blank" rel="noopener noreferrer">cypress-io/github-action</a> caching the Cypress installation and dependencies for fast Cypress CI initialisation</li><li><a href="https://cucumber.io/docs/gherkin/reference/" target="_blank" rel="noopener noreferrer">Cucumber</a> for human-readable test specifications</li><li><a href="https://github.com/WasiqB/multiple-cucumber-html-reporter/tree/main" target="_blank" rel="noopener noreferrer">Multiple Cucumber HTML Reporter</a> to create easy readable, and searchable HTML reports enriched with metadata</li></ul><h2 id="requirements-and-commands" tabindex="-1"><a class="header-anchor" href="#requirements-and-commands"><span>Requirements and Commands</span></a></h2><p>Building this project requires <code>nodejs</code> (<code>&gt;= v20</code>) and <code>npm</code>.</p><h3 id="commands" tabindex="-1"><a class="header-anchor" href="#commands"><span>Commands</span></a></h3><table><thead><tr><th>Command</th><th>Description</th></tr></thead><tbody><tr><td><strong>Installation</strong></td><td></td></tr><tr><td><code>npm install</code></td><td>Project setup</td></tr><tr><td><strong>Linting</strong></td><td></td></tr><tr><td><code>npm run test:lint:eslint</code></td><td>Run Eslint linter</td></tr><tr><td><strong>Run Cypress</strong></td><td></td></tr><tr><td><code>npm run cypress:open</code></td><td>Open Cypress GUI</td></tr><tr><td><code>npm run cypress:run</code></td><td>Run all Cypress tests headless in CLI</td></tr><tr><td><strong>Documentation</strong></td><td></td></tr><tr><td><code>npm run docs:dev</code></td><td>Run documentation locally in development mode</td></tr><tr><td><code>npm run docs:build</code></td><td>Build static documentation</td></tr><tr><td><strong>Maintenance</strong></td><td></td></tr><tr><td><code>npm run update</code></td><td>Check for updates</td></tr></tbody></table><h3 id="update" tabindex="-1"><a class="header-anchor" href="#update"><span>Update</span></a></h3><p>Retrieve a list of updatable packages by running <code>npm run update</code>.</p><p>Appending <code>-u </code> will also update the packages in the <code>package.json</code>. Afterwards run <code>npm install</code>.</p><div class="language-bash line-numbers-mode" data-highlighter="shiki" data-ext="bash" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code class="language-bash"><span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">npm</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> run</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> update</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> --</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> -u</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">npm</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> install</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="test-examples" tabindex="-1"><a class="header-anchor" href="#test-examples"><span>Test Examples</span></a></h2><p>To showcase Cucumber feature tests, a simple login example on <a href="https://the-internet.herokuapp.com/" target="_blank" rel="noopener noreferrer">the-internet</a> is written in the feature file <a href="./cypress/e2e/features/Login.feature">Login.feature</a>.<br> The <code>baseUrl</code> is set in <a href="https://github.com/IT4Change/boilerplate-e2e-cypress-cucumber/blob/8306614812c1011642c75ae34057ca66784cae4f/cypress.config.ts#L25" target="_blank" rel="noopener noreferrer">cypress.config.ts</a> and the test steps are defined in <a href="./cypress/e2e/ssteps/login.ts">this step definition file</a>.</p><p>Testing against the demo website <a href="https://the-internet.herokuapp.com/" target="_blank" rel="noopener noreferrer">the-internet</a> was chosen from the test practice recommendations of https://www.davidmello.com/best-websites-for-practicing-test-automation/.</p><h2 id="how-to-use-as-part-of-a-project" tabindex="-1"><a class="header-anchor" href="#how-to-use-as-part-of-a-project"><span>How to use as part of a project</span></a></h2><p>If you want to use this template as part of a larger project, e.g. in conjunction with a frontend also utilizing a boilerplate you cannot use the template mechanic provided by github for this repository.</p><p>You can use the following commands to include the whole git history of the boilerplate and be able to update according to changes to this repo using another remote.</p><div class="language-bash line-numbers-mode" data-highlighter="shiki" data-ext="bash" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code class="language-bash"><span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">git</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> remote</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> add</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> xxx_boilerplate-e2e-cypress-cucumber</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> git@github.com:IT4Change/boilerplate-backend.git</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">git</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> fetch</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> xxx_boilerplate-e2e-cypress-cucumber</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">git</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> merge</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> -s</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> ours</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> --no-commit</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> --allow-unrelated-histories</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> xxx_boilerplate-e2e-cypress-cucumber/master</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">git</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> read-tree</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> --prefix=xxx/</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> -u</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> xxx_boilerplate-e2e-cypress-cucumber/master</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">git</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> commit</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> -m</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> &quot;Imported boilerplate-e2e-cypress-cucumber as a subtree under xxx/.&quot;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>To update the subtree you can use</p><div class="language-bash line-numbers-mode" data-highlighter="shiki" data-ext="bash" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code class="language-bash"><span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">git</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> subtree</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> pull</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> -P</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> xxx/</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> xxx_boilerplate-e2e-cypress-cucumber</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> master</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">git</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> commit</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> -m</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> &quot;Updated boilerplate-e2e-cypress-cucumber in subtree under xxx/.&quot;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><p>Where <code>xxx</code> refers to the folder and product part you want to use the boilerplate in (e.g. <code>cypress</code> or <code>e2e-tests</code>).</p><p>This mechanic was taken from this <a href="https://stackoverflow.com/questions/1683531/how-to-import-existing-git-repository-into-another/8396318#8396318" target="_blank" rel="noopener noreferrer">source</a></p><h2 id="license" tabindex="-1"><a class="header-anchor" href="#license"><span>License</span></a></h2><p><a href="./LICENSE">Apache 2.0</a></p></div><!----><!----><!----></div><footer class="vp-page-meta"><div class="vp-meta-item edit-link"><a class="auto-link external-link vp-meta-label" href="https://github.com/IT4Change/boilerplate-e2e-cypress-cucumber/edit/master/./README.md" aria-label="Edit this page" rel="noopener noreferrer" target="_blank"><!--[--><svg xmlns="http://www.w3.org/2000/svg" class="icon edit-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="edit icon" name="edit"><path d="M430.818 653.65a60.46 60.46 0 0 1-50.96-93.281l71.69-114.012 7.773-10.365L816.038 80.138A60.46 60.46 0 0 1 859.225 62a60.46 60.46 0 0 1 43.186 18.138l43.186 43.186a60.46 60.46 0 0 1 0 86.373L588.879 565.55l-8.637 8.637-117.466 68.234a60.46 60.46 0 0 1-31.958 11.229z"></path><path d="M728.802 962H252.891A190.883 190.883 0 0 1 62.008 771.98V296.934a190.883 190.883 0 0 1 190.883-192.61h267.754a60.46 60.46 0 0 1 0 120.92H252.891a69.962 69.962 0 0 0-69.098 69.099V771.98a69.962 69.962 0 0 0 69.098 69.098h475.911A69.962 69.962 0 0 0 797.9 771.98V503.363a60.46 60.46 0 1 1 120.922 0V771.98A190.883 190.883 0 0 1 728.802 962z"></path></svg><!--]-->Edit this page<!----></a></div><div class="vp-meta-item git-info"><!----><!----></div></footer><nav class="vp-page-nav"><!----><a class="route-link auto-link next" href="/boilerplate-e2e-cypress-cucumber/LICENSE.html" aria-label="/LICENSE.html"><div class="hint">Next<span class="arrow end"></span></div><div class="link">/LICENSE.html<!----></div></a></nav><!----><!----><!--]--></main><!--]--><footer class="vp-footer-wrapper" vp-footer><div class="vp-footer">CC BY IT4C.dev & Authors - <a href="https://it4c.dev/imprint.html">Imprint</a></div><!----></footer></div><!--]--><!--]--><!--[--><!----><!----><!--[--><!--]--><!--]--><!--]--></div>
<script type="module" src="/boilerplate-e2e-cypress-cucumber/assets/app-C0vivGk8.js" defer></script>
</body>
</html>