From c849f2246510c43a61eaa8b23b4b4060f02aa5ec Mon Sep 17 00:00:00 2001 From: helena <48861601+helenanull@users.noreply.github.com> Date: Sat, 3 Apr 2021 18:39:44 +0300 Subject: [PATCH 1/5] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 44c5a13..9fae6bf 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # **Simple** E2E test suite with Cypress > **site:** http://angularjs.realworld.io/ [WIP] -> **test results:** https://dashboard.cypress.io/projects/urshkd/runs +> **cypress dashboard:** https://dashboard.cypress.io/projects/urshkd/runs ## :goal_net: Goals - keep it simple - no 'custom' abstractions/functions/utils/helpers (use what Cypress provides) From 4a5e3b5a98e6b232d56823655de00ae85516e37c Mon Sep 17 00:00:00 2001 From: helena <48861601+helenanull@users.noreply.github.com> Date: Sat, 3 Apr 2021 18:40:50 +0300 Subject: [PATCH 2/5] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 9fae6bf..cbf9bfd 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ # **Simple** E2E test suite with Cypress -> **site:** http://angularjs.realworld.io/ [WIP] +> **application under test:** http://angularjs.realworld.io/ > **cypress dashboard:** https://dashboard.cypress.io/projects/urshkd/runs From c51dd35ea7e0df0751af9c4a533ae4513b5a0048 Mon Sep 17 00:00:00 2001 From: helena <48861601+helenanull@users.noreply.github.com> Date: Sat, 3 Apr 2021 19:05:35 +0300 Subject: [PATCH 3/5] Update README.md --- README.md | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index cbf9bfd..e014ce2 100644 --- a/README.md +++ b/README.md @@ -30,18 +30,17 @@ - import **`cypress-example`** folder and you are good to go ## :bulb: Information +#### :test_tube: Tests: +:file_folder: Tests are located in `cypress/integration` folder -Tests are located in `cypress/integration` folder +:file_folder: Custom commands are located in `cypress/support` folder (`.cmd.js` suffix) -Configuration files: -1. `cypress.json` -2. `plugins/index.js` - -Custom commands (shortcuts) are located in `cypress/support` folder (`.cmd.js` suffix) - -Selectors are located in `cypress/selectors` folder [only difference from cypress default project structure] -- __not__ using page objects pattern but keeping selectors (only selectors) separately as they are not easily readable and sometimes we need to share selectors between tests +:file_folder: Selectors (CSS selectors) are located in `cypress/selectors` folder [only difference from cypress default project structure] - __not__ using page objects pattern but keeping selectors (only selectors) separately [Read more](https://github.com/helenanull/cypress-example#grey_question-qa) +#### :hammer_and_wrench: Configuration +Config files: +1. `cypress.json` - Main config file where default behavior of Cypress can be modified. [More info](https://docs.cypress.io/guides/references/configuration#cypress-json) +2. `plugins/index.js` - Plugins file is where we can programmatically alter the resolved configuration [More info](https://docs.cypress.io/guides/tooling/plugins-guide#Use-Cases) ## :grey_question: Q&A 1. Why keep selectors separately (not hard-coded to tests) From 0a288dde154651648a8b4d9181acd7a9650bb46f Mon Sep 17 00:00:00 2001 From: helena <48861601+helenanull@users.noreply.github.com> Date: Sat, 3 Apr 2021 19:46:53 +0300 Subject: [PATCH 4/5] Update README.md --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index e014ce2..2cc75f0 100644 --- a/README.md +++ b/README.md @@ -42,6 +42,10 @@ Config files: 1. `cypress.json` - Main config file where default behavior of Cypress can be modified. [More info](https://docs.cypress.io/guides/references/configuration#cypress-json) 2. `plugins/index.js` - Plugins file is where we can programmatically alter the resolved configuration [More info](https://docs.cypress.io/guides/tooling/plugins-guide#Use-Cases) +This test suite is supporting multiple viewports (mobile and desktop). + +One solution is to use [cy.viewport()](https://docs.cypress.io/api/commands/viewport) command inside the test, to change the viewports, but very often websites also check user agent to get the device information(and show the mobile view). Since user agent is something [we can't change in the middle of the test](https://github.com/cypress-io/cypress/issues/2100), we need to pass config value when launching tests. In `cypress.json` we have a `device` parameter and in plugins file `index.js`, we decide viewports and user agent parameter values based on device value. + ## :grey_question: Q&A 1. Why keep selectors separately (not hard-coded to tests) - **tests are much more readable** - css selectors are by design hard to read - even if we add data-test attributes. We might need 2nd child or want to verify that selector is a child for another element, like `.class2 > ul:nth-child(2)` (alternative `get().find()` or `get().parent()` is bad practice because of [this](https://docs.cypress.io/guides/core-concepts/retry-ability.html#Only-the-last-command-is-retried) ) From c3456a9f0349174fa34f91e2fe61a443e302288d Mon Sep 17 00:00:00 2001 From: helena <48861601+helenanull@users.noreply.github.com> Date: Sat, 3 Apr 2021 19:50:19 +0300 Subject: [PATCH 5/5] Update README.md --- README.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/README.md b/README.md index 2cc75f0..2544a81 100644 --- a/README.md +++ b/README.md @@ -53,10 +53,6 @@ One solution is to use [cy.viewport()](https://docs.cypress.io/api/commands/view - selector and test logic is separated - when selector is updated, we just need to update 1 selector file and not multiple tests 2. Is it still E2E test if we use API to login in? - since end result will be the same - it will catch exactly the same bugs as `full flow/user journey` E2E test would find, (we need to be careful not to leave 'gaps' though), it is E2E - tests are just separated and independent with this approach, **test suite is E2E**, one test might not be. Example: We have a bug where login button is not working - our settings test would pass(if there are no bugs in settings), but login test would still fail. -4. Why mobile view is in config and not in test (like cy.viewport())? - - we can't change userAgent in the middle of the test: - https://github.com/cypress-io/cypress/issues/2100 - So it seems more correct to launch the tests with the correct config (--env device=mob/web) ## :link: Links