https://github.com/wlsf82/page-objects-vs-gui-custom-commands
Project to demonstrate Page Objects and GUI custom commands with Cypress.io
https://github.com/wlsf82/page-objects-vs-gui-custom-commands
custom-commands cypress-io e2e-testing mattermost page-object
Last synced: 6 months ago
JSON representation
Project to demonstrate Page Objects and GUI custom commands with Cypress.io
- Host: GitHub
- URL: https://github.com/wlsf82/page-objects-vs-gui-custom-commands
- Owner: wlsf82
- License: mit
- Created: 2021-04-08T19:00:46.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-07-21T21:50:19.000Z (about 4 years ago)
- Last Synced: 2025-04-23T08:14:52.424Z (6 months ago)
- Topics: custom-commands, cypress-io, e2e-testing, mattermost, page-object
- Language: JavaScript
- Homepage:
- Size: 22.5 KB
- Stars: 29
- Watchers: 2
- Forks: 15
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Page Objects vs GUI Custom Commands
This is a sample project to demonstrate the differences between writing end-to-end tests using the **Page Objects** pattern, using [**Cypress custom commands**](https://docs.cypress.io/api/cypress-api/custom-commands), or none of them at all.
The application under test is [**Mattermost Preview Mode**](https://github.com/mattermost/mattermost-docker-preview), and it can be found on [**Docker Hub**](https://hub.docker.com/r/mattermost/platform).
## Installation
Here you will find instructions for installing the **dev dependencies**, besides the installation of the application under test (**dev environment**).
### Dev Dependencies
Run `npm install` to install the dev dependencies.
> You will need [Node.js](http://nodejs.org) and NPM installed for it.
### Dev environment
For installation instructions of **Mattermost**, read [**their official documentation**](https://docs.mattermost.com/install/docker-local-machine.html).
## Running the tests
Here you will find instructions for running the tests in both headless and interactive modes.
### Headless Mode
With the Mattermost application up-and-running, run `npm test` to run the tests in headless mode.
### Interactive Mode
With the Mattermost application up-and-running, run `npm run cy:open` to open the Cypress Runner, then click the > Run 1 integration spec button to run the tests in interactive mode.
## Implementation
Here you will find the implementation of:
- [The tests](./cypress/integration/signup.spec.js)
- [The Page Object](./cypress/pageObjects/signup.js)
- [And the GUI custom command](./cypress/support/commands.js)
___
Made with 💚 by [Walmyr](https://walmyr.dev).