@leonknabel/gitlab-cypress-integration

Cypress gitlab integration

An example of the simple integration into gitlab-ci can be seen here.

Usage

In GitLab, you can post code blocks with cypress commands and they will be updated with screenshots and state. Updates on pipeline runs on issue related branches.

```cypress
cy.visit('/sub-page');
cy.get('button').contains('Click me').click();
cy.get('simple-snack-bar');
```

---

Passed test

cy.visit('/sub-page');
cy.get('button').contains('Click me').click();
cy.get('simple-snack-bar');

✅ issues/3-show-snack-bar-on-button-click


---

Failed test

cy.visit('/sub-page');
cy.get('button').contains('Click me').click();
cy.get('simple-snack-bar');

❌ issues/3-show-snack-bar-on-button-click


---

Issues

A branch name containing a number is considered related to an issue with given number as id. The description and notes will be checked against this branch.

Note on issue

After creating an issue add a comment with one or more tests to it.

cy.visit('/sub-page');
cy.get('button').contains('Click me').click();
cy.get('simple-snack-bar');

Create branch

Create a branch to address the issue. The issue id musst be part of the chosen branch name. This can be easily done directly via the issue. Now everytime the branch has changes pushed, the comments will be updated.

Resulting in a screenshot and failure indication on the test and on the comment itself.

cy.visit('/sub-page');
cy.get('button').contains('Click me').click();
cy.get('simple-snack-bar');

❌ issues/3-show-snack-bar-on-button-click


After pushing a fix for the issue to the related branch, the comment is updated again.

cy.visit('/sub-page');
cy.get('button').contains('Click me').click();
cy.get('simple-snack-bar');

✅ issues/3-show-snack-bar-on-button-click


---

Setup

This project was generated with Angular CLI version 17.3.2.

Cypress

Add cypress as e2e testing framework

ng add @cypress/schematic

Gitlab cypress integration

Shell

The gitlab token can either be passed as cli argument -t, --token or with the variable GITLAB_TOKEN. The token must have at least api access.

npx @leonknabel/gitlab-cypress-integration -r <repository> -b <branch> -a <application> -t <gitlab-token>

Gitlab Pipeline .gitlab-ci.yml

image: node:latest

report_branch:
  stage: report
  script:
    - npx -y @leonknabel/gitlab-cypress-integration@1.2.0 -b "$CI_COMMIT_BRANCH" -r "$CI_PROJECT_PATH" -a "angular-example" -t "$GITLAB_TOKEN" --local

• CI_COMMIT_BRANCH and CI_PROJECT_PATH are Predefined CI/CD variables.
• GITLAB_TOKEN is a CI/CD variables and can be set for all CI/CD runs. The token must have api access.