Commit 1b78f6a9 authored by Sven-Erik Teveldal Nystad's avatar Sven-Erik Teveldal Nystad
Browse files

Initial commit

parents
stages:
- test
variables:
npm_config_cache: "$CI_PROJECT_DIR/.npm"
CYPRESS_CACHE_FOLDER: "$CI_PROJECT_DIR/cache/Cypress"
cache:
key: ${CI_COMMIT_REF_SLUG}
paths:
- .npm
- cache/Cypress
- node_modules
test:
image: cypress/base:10
stage: test
script:
# install dependencies
- npm ci
# Kjør express-serveren i bakgrunnen
- npm start &
# Kjør testene
- npm test
artifacts:
when: always
paths:
- cypress/videos
- cypress/screenshots
expire_in: 1 day
\ No newline at end of file
# BDD-testing med cucumber og cypress
Dette er en superenkel eksempelapplikasjon som er satt opp med BDD-testing med cucumber og cypress. Applikasjonen server en enkel webside med express.js.
### Instruksjoner
1. Klon prosjektet:
```
git clone https://gitlab.stud.idi.ntnu.no/nilstesd/cypress-bdd-start.git
```
2. Installer avhengigheter med npm:
```
cd cypress-bdd-start
npm install
```
3. Kjør express-serveren med applikasjonen:
```
npm start
```
4. Sjekk at applikasjonen kjører:
[http://localhost:8080](http://localhost:8080)
5. Kjør testene
Det er lagt inn script-definisjon i package.json så vi kan enkelt kjøre testene med:
```
npm test
```
Hvis du får feilmelding som sier at cypress executable ikke er funnet kan du kjøre følgende før du prøver å starte cypress på nytt (jeg måtte det):
```
npx cypress install
```
(npx er inkludert med npm > v5.2)
6. Sjekk resultatet
Denne testen kjørte nå i en "headless" eller virtuell browser. Dette betyr at vi også kan kjøre testene som endel av et skript, f.eks på en CI-server.
Kjøringen vises altså ikke i en nettleser, men vi får en testrapport på konsollet.
En video fra den virtuelle nettleseren kommer imidlertid i mappen *cypress/video* etter kjøring.
Ved feil kommer det også skjermdumper under *cypress/screenshots*.
{
"baseUrl": "http://localhost:8080",
"testFiles": "**/*.feature"
}
{}
\ No newline at end of file
# language: no
Egenskap: Betaling
Som kunde av nettkiosken
Ønsker jeg å kunne legge inn betalingsinformasjon
Slik at jeg kan få godis i posten
Scenario: Registrer kjøpet
Gitt at jeg har lagt inn varer i handlekurven
Og trykket på Gå til betaling
Når jeg legger inn navn, adresse, postnummer, poststed og kortnummer
Og trykker på Fullfør kjøp
skal jeg få beskjed om at kjøpet er registrert
Scenario: Feilmeldinger
Gitt at jeg har lagt inn varer i handlekurven
Og trykket på Gå til betaling
Når jeg legger inn ugyldige verdier i feltene
skal jeg få feilmeldinger for disse
\ No newline at end of file
import { Given, When, Then, And } from "cypress-cucumber-preprocessor/steps";
// Registrer kjøpet
Given(/^at jeg har lagt inn varer i handlekurven$/, () => {
cy.visit('http://localhost:8080');
cy.get('#product').select('Hubba bubba');
cy.get('#quantity').clear().type('4');
cy.get('#saveItem').click();
cy.get('#product').select('Smørbukk');
cy.get('#quantity').clear().type('5');
cy.get('#saveItem').click();
});
And(/^trykket på Gå til betaling$/, () => {
cy.get('#goToPayment').click();
});
When(/^jeg legger inn navn, adresse, postnummer, poststed og kortnummer$/, () => {
cy.get('#fullName').type('Ola Nordmann').blur();
cy.get('#address').type('Hakkebakkeskogen 1').blur();
cy.get('#postCode').type('1234').blur();
cy.get('#city').type('Skogen').blur();
cy.get('#creditCardNo').type('1234567890123456').blur();
});
And(/^trykker på Fullfør kjøp$/, () => {
cy.get('#submit').click();
});
Then(/^skal jeg få beskjed om at kjøpet er registrert$/, function () {
cy.contains('Din ordre er registrert.');
});
// Feilmeldinger
Given(/^at jeg har lagt inn varer i handlekurven$/, () => {
cy.visit('http://localhost:8080');
cy.get('#product').select('Hubba bubba');
cy.get('#quantity').clear().type('4');
cy.get('#saveItem').click();
cy.get('#product').select('Smørbukk');
cy.get('#quantity').clear().type('5');
cy.get('#saveItem').click();
});
And(/^trykket på Gå til betaling$/, () => {
cy.get('#goToPayment').click();
});
When(/^jeg legger inn ugyldige verdier i feltene$/, () => {
cy.get('#fullName').clear().blur();
cy.get('#address').clear().blur();
cy.get('#postCode').clear().blur();
cy.get('#city').type('Skogen').clear().blur();
cy.get('#creditCardNo').clear().blur();
cy.get('#submit').click();
});
Then(/^skal jeg få feilmeldinger for disse$/, function () {
cy.contains('#fullNameError', 'Feltet må ha en verdi');
cy.contains('#addressError', 'Feltet må ha en verdi');
cy.contains('#postCodeError', 'Feltet må ha en verdi');
cy.contains('#cityError', 'Feltet må ha en verdi');
cy.contains('#creditCardNoError', 'Kredittkortnummeret må bestå av 16 siffer');
});
\ No newline at end of file
# language: no
Egenskap: Handlekurv
Som kunde av nettkiosken
Ønsker jeg å legge varer i handlekurven
Slik at jeg kan få godis i posten
Scenario: Legge til varer i handlekurven
Gitt at jeg har åpnet nettkiosken
Når jeg legger inn varer og kvanta
skal handlekurven inneholde det jeg har lagt inn
Og den skal ha riktig totalpris
Scenario: Slette varer i handlekurven
Gitt at jeg har åpnet nettkiosken
Og lagt inn varer og kvanta
Når jeg sletter varer
skal ikke handlekurven inneholde det jeg har slettet
Scenario: Oppdatere kvanta i handlekurven
Gitt at jeg har åpnet nettkiosken
Og lagt inn varer og kvanta
Når jeg oppdaterer kvanta for en vare
skal handlekurven inneholde riktig kvanta for varen
\ No newline at end of file
import { Given, When, Then, And } from "cypress-cucumber-preprocessor/steps";
// Legge til varer i handlekurven
Given(/^at jeg har åpnet nettkiosken$/, () => {
cy.visit('http://localhost:8080');
});
When(/^jeg legger inn varer og kvanta$/, () => {
cy.get('#product').select('Hubba bubba');
cy.get('#quantity').clear().type('4');
cy.get('#saveItem').click();
cy.get('#product').select('Smørbukk');
cy.get('#quantity').clear().type('5');
cy.get('#saveItem').click();
cy.get('#product').select('Stratos');
cy.get('#quantity').clear().type('1');
cy.get('#saveItem').click();
cy.get('#product').select('Hobby');
cy.get('#quantity').clear().type('2');
cy.get('#saveItem').click();
});
Then(/^skal handlekurven inneholde det jeg har lagt inn$/, () => {
cy.contains('#list', 'Hubba bubba');
cy.contains('#list', 'Smørbukk');
cy.contains('#list', 'Stratos');
cy.contains('#list', 'Hobby');
});
And(/^den skal ha riktig totalpris$/, function () {
cy.get('#price').should('have.text', '33');
});
//Slette varer i handlekurven
Given(/^at jeg har åpnet nettkiosken$/, () => {
cy.visit('http://localhost:8080');
});
And(/^lagt inn varer og kvanta$/, () => {
cy.get('#product').select('Hubba bubba');
cy.get('#quantity').clear().type('4');
cy.get('#saveItem').click();
cy.get('#product').select('Smørbukk');
cy.get('#quantity').clear().type('5');
cy.get('#saveItem').click();
cy.get('#product').select('Stratos');
cy.get('#quantity').clear().type('1');
cy.get('#saveItem').click();
cy.get('#product').select('Hobby');
cy.get('#quantity').clear().type('2');
cy.get('#saveItem').click();
});
When(/^jeg sletter varer$/, () => {
cy.get('#product').select('Stratos');
cy.get('#deleteItem').click();
cy.get('#product').select('Hobby');
cy.get('#deleteItem').click();
});
Then(/^skal ikke handlekurven inneholde det jeg har slettet$/, function () {
cy.contains('#list', 'Hubba bubba');
cy.contains('#list', 'Smørbukk');
});
//Oppdatere kvanta i handlekurven
Given(/^at jeg har åpnet nettkiosken$/, () => {
cy.visit('http://localhost:8080');
});
And(/^lagt inn varer og kvanta$/, () => {
cy.get('#product').select('Hubba bubba');
cy.get('#quantity').clear().type('4');
cy.get('#saveItem').click();
cy.get('#product').select('Smørbukk');
cy.get('#quantity').clear().type('5');
cy.get('#saveItem').click();
cy.get('#product').select('Stratos');
cy.get('#quantity').clear().type('1');
cy.get('#saveItem').click();
cy.get('#product').select('Hobby');
cy.get('#quantity').clear().type('2');
cy.get('#saveItem').click();
});
When(/^jeg oppdaterer kvanta for en vare$/, () => {
cy.get('#product').select('Hubba bubba');
cy.get('#quantity').clear().type('1');
cy.get('#saveItem').click();
cy.get('#product').select('Smørbukk');
cy.get('#quantity').clear().type('1');
cy.get('#saveItem').click();
});
Then(/^skal handlekurven inneholde riktig kvanta for varen$/, function () {
cy.contains('#list', '1 Hubba bubba');
cy.contains('#list', '1 Smørbukk');
});
\ No newline at end of file
const cucumber = require('cypress-cucumber-preprocessor').default;
module.exports = (on, config) => {
on('file:preprocessor', cucumber())
};
\ No newline at end of file
// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add("login", (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
// ***********************************************************
// This example support/index.js is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************
// Import commands.js using ES2015 syntax:
import './commands'
// Alternatively you can use CommonJS syntax:
// require('./commands')
#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
case `uname` in
*CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
esac
if [ -x "$basedir/node" ]; then
"$basedir/node" "$basedir/../JSONStream/bin.js" "$@"
ret=$?
else
node "$basedir/../JSONStream/bin.js" "$@"
ret=$?
fi
exit $ret
@ECHO off
SETLOCAL
CALL :find_dp0
IF EXIST "%dp0%\node.exe" (
SET "_prog=%dp0%\node.exe"
) ELSE (
SET "_prog=node"
SET PATHEXT=%PATHEXT:;.JS;=;%
)
"%_prog%" "%dp0%\..\JSONStream\bin.js" %*
ENDLOCAL
EXIT /b %errorlevel%
:find_dp0
SET dp0=%~dp0
EXIT /b
#!/usr/bin/env pwsh
$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
$exe=""
if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
# Fix case when both the Windows and Linux builds of Node
# are installed in the same directory
$exe=".exe"
}
$ret=0
if (Test-Path "$basedir/node$exe") {
& "$basedir/node$exe" "$basedir/../JSONStream/bin.js" $args
$ret=$LASTEXITCODE
} else {
& "node$exe" "$basedir/../JSONStream/bin.js" $args
$ret=$LASTEXITCODE
}
exit $ret
#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
case `uname` in
*CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
esac
if [ -x "$basedir/node" ]; then
"$basedir/node" "$basedir/../acorn/bin/acorn" "$@"
ret=$?
else
node "$basedir/../acorn/bin/acorn" "$@"
ret=$?
fi
exit $ret
@ECHO off
SETLOCAL
CALL :find_dp0
IF EXIST "%dp0%\node.exe" (
SET "_prog=%dp0%\node.exe"
) ELSE (
SET "_prog=node"
SET PATHEXT=%PATHEXT:;.JS;=;%
)
"%_prog%" "%dp0%\..\acorn\bin\acorn" %*
ENDLOCAL
EXIT /b %errorlevel%
:find_dp0
SET dp0=%~dp0
EXIT /b
#!/usr/bin/env pwsh
$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
$exe=""
if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
# Fix case when both the Windows and Linux builds of Node
# are installed in the same directory
$exe=".exe"
}
$ret=0
if (Test-Path "$basedir/node$exe") {
& "$basedir/node$exe" "$basedir/../acorn/bin/acorn" $args
$ret=$LASTEXITCODE
} else {
& "node$exe" "$basedir/../acorn/bin/acorn" $args
$ret=$LASTEXITCODE
}
exit $ret
#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
case `uname` in
*CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
esac
if [ -x "$basedir/node" ]; then
"$basedir/node" "$basedir/../atob/bin/atob.js" "$@"
ret=$?
else
node "$basedir/../atob/bin/atob.js" "$@"
ret=$?
fi
exit $ret
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment