#2911 cypress e2e #3451

petersopko · 2022-07-16T16:16:34Z

Thank you for your contribution to the KodaDot NFT gallery.
👇 _ Let's make a quick check before the contribution.

PR type

Bugfix
Feature
Refactoring

What's new?

PR partially solves Tests for critical functionality and evergreen components #2911
Requires deployment <rubick/magick_issue>

What was added:

first E2E test suite which can be run locally by devs against their locally built app at http://localhost:9090/
the way to run the tests is to go to nft-gallery/tests and running cypress run which prompts tests to run in headless mode
new route with /e2e-login was added, which is logging in user with random wallet provided (we want to simulate logged in user experience but we don't have available extension since this is automated test)
tests are checking correct app behavior at landing, explore, gallery, collections, item details and collection details
tests execution can be explored at tests/cypress/e2e/basicE2E.cy.ts
custom commands (functions) can be checked out at tests/cypress/support/commands.ts
cypress config resides at tests/cypress.config.ts
offtopic: added pnpm dev-win to get around weird error I'm facing at my win machine: 'PORT' is not recognized as an internal or external command, operable program or batch file.

Before submitting Pull Request, please make sure:

My contribution builds clean without any errors or warnings
I've merged recent default branch -- main and I've no conflicts
I've tried to respect high code quality standards
I've didn't break any original functionality
I've posted a screenshot of demonstrated change in this PR

Optional

I've tested it at </rmrk/collection/26902bc2f7c20c546a-1FVG7>
I've tested PR on mobile and everything seems works
I found edge cases
I've written some unit tests 🧪

Had issue bounty label?

Fill up your KSM address: Payout

Community participation

Are you at KodaDot Discord?

Screenshot

My fix has changed something on UI; a screenshot is best to understand changes for others.

basicE2E.cy.ts.mp4

…ress-init # Conflicts: # netlify.toml # pnpm-lock.yaml

netlify · 2022-07-16T16:17:03Z

✅ Deploy Preview for koda-nuxt ready!

Name	Link
🔨 Latest commit	`2d5168c`
🔍 Latest deploy log	https://app.netlify.com/sites/koda-nuxt/deploys/62ed014c5a1bee00080b80d2
😎 Deploy Preview	https://deploy-preview-3451--koda-nuxt.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

…ress-init

# Conflicts: # package.json # pnpm-lock.yaml

kkukelka

code lgtm now

…ress-init

petersopko · 2022-08-04T13:02:46Z

@vikiival can you please try to run this locally? I'll create an issue concerning the tests in general and the future of this, I'd just like to have this checked by somebody else

vikiival · 2022-08-05T11:25:12Z

  3 failing

  1) exploreBsxGallery
       expandGallerySearch:
     CypressError: Timed out retrying after 4050ms: `cy.click()` failed because this element:

`<a id="GALLERY-label" tabindex="0">...</a>`

is being covered by another element:

`<div class="loading-background"></div>`

Fix this problem, or use {force: true} to disable error checking.

https://on.cypress.io/element-cannot-be-interacted-with
      at $Cy.ensureDescendents (http://localhost:9090/__cypress/runner/cypress_runner.js:162005:78)
      at ensureDescendents (http://localhost:9090/__cypress/runner/cypress_runner.js:147397:8)
      at ensureDescendentsAndScroll (http://localhost:9090/__cypress/runner/cypress_runner.js:147404:14)
      at ensureElIsNotCovered (http://localhost:9090/__cypress/runner/cypress_runner.js:147536:5)
      at runAllChecks (http://localhost:9090/__cypress/runner/cypress_runner.js:147726:52)
      at retryActionability (http://localhost:9090/__cypress/runner/cypress_runner.js:147750:16)
      at tryCatcher (http://localhost:9090/__cypress/runner/cypress_runner.js:13012:23)
      at Function.Promise.attempt.Promise.try (http://localhost:9090/__cypress/runner/cypress_runner.js:10286:29)
      at whenStable (http://localhost:9090/__cypress/runner/cypress_runner.js:166931:65)
      at http://localhost:9090/__cypress/runner/cypress_runner.js:166385:14
      at tryCatcher (http://localhost:9090/__cypress/runner/cypress_runner.js:13012:23)
      at Promise._settlePromiseFromHandler (http://localhost:9090/__cypress/runner/cypress_runner.js:10947:31)
      at Promise._settlePromise (http://localhost:9090/__cypress/runner/cypress_runner.js:11004:18)
      at Promise._settlePromise0 (http://localhost:9090/__cypress/runner/cypress_runner.js:11049:10)
      at Promise._settlePromises (http://localhost:9090/__cypress/runner/cypress_runner.js:11129:18)
      at Promise._fulfill (http://localhost:9090/__cypress/runner/cypress_runner.js:11073:18)
      at http://localhost:9090/__cypress/runner/cypress_runner.js:12687:46
  From Your Spec Code:
      at Context.eval (http://localhost:9090/__cypress/tests?p=cypress/e2e/basicE2E.cy.ts:174:36)

  2) exploreBsxGallery
       galleryInputFields:
     CypressError: Timed out retrying after 4000ms: `cy.type()` failed because this element is not visible:

`<input type="number" autocomplete="on" min="0" step="any" placeholder="MIN PRICE" data-cy="input-min" class="input">`

This element `<input.input>` is not visible because its parent `<div#sortAndFilter.collapse-content>` has CSS property: `display: none`

Fix this problem, or use `{force: true}` to disable error checking.

https://on.cypress.io/element-cannot-be-interacted-with
      at runVisibilityCheck (http://localhost:9090/__cypress/runner/cypress_runner.js:161836:76)
      at $Cy.ensureStrictVisibility (http://localhost:9090/__cypress/runner/cypress_runner.js:161852:12)
      at runAllChecks (http://localhost:9090/__cypress/runner/cypress_runner.js:147695:14)
      at retryActionability (http://localhost:9090/__cypress/runner/cypress_runner.js:147750:16)
      at tryCatcher (http://localhost:9090/__cypress/runner/cypress_runner.js:13012:23)
      at Function.Promise.attempt.Promise.try (http://localhost:9090/__cypress/runner/cypress_runner.js:10286:29)
      at whenStable (http://localhost:9090/__cypress/runner/cypress_runner.js:166931:65)
      at http://localhost:9090/__cypress/runner/cypress_runner.js:166385:14
      at tryCatcher (http://localhost:9090/__cypress/runner/cypress_runner.js:13012:23)
      at Promise._settlePromiseFromHandler (http://localhost:9090/__cypress/runner/cypress_runner.js:10947:31)
      at Promise._settlePromise (http://localhost:9090/__cypress/runner/cypress_runner.js:11004:18)
      at Promise._settlePromise0 (http://localhost:9090/__cypress/runner/cypress_runner.js:11049:10)
      at Promise._settlePromises (http://localhost:9090/__cypress/runner/cypress_runner.js:11129:18)
      at Promise._fulfill (http://localhost:9090/__cypress/runner/cypress_runner.js:11073:18)
      at http://localhost:9090/__cypress/runner/cypress_runner.js:12687:46
  From Your Spec Code:
      at Context.eval (http://localhost:9090/__cypress/tests?p=cypress/support/e2e.ts:235:37)

  3) exploreBsxGallery
       gallerySortBsx:
     CypressError: Timed out retrying after 4050ms: `cy.click()` failed because this element is not visible:

`<button type="button" data-cy="gallery-sort-by" class="button is-primary">...</button>`

This element `<button.button.is-primary>` is not visible because its parent `<div#sortAndFilter.collapse-content>` has CSS property: `display: none`

Fix this problem, or use `{force: true}` to disable error checking.

https://on.cypress.io/element-cannot-be-interacted-with
      at runVisibilityCheck (http://localhost:9090/__cypress/runner/cypress_runner.js:161836:76)
      at $Cy.ensureStrictVisibility (http://localhost:9090/__cypress/runner/cypress_runner.js:161852:12)
      at runAllChecks (http://localhost:9090/__cypress/runner/cypress_runner.js:147695:14)
      at retryActionability (http://localhost:9090/__cypress/runner/cypress_runner.js:147750:16)
      at tryCatcher (http://localhost:9090/__cypress/runner/cypress_runner.js:13012:23)
      at Function.Promise.attempt.Promise.try (http://localhost:9090/__cypress/runner/cypress_runner.js:10286:29)
      at whenStable (http://localhost:9090/__cypress/runner/cypress_runner.js:166931:65)
      at http://localhost:9090/__cypress/runner/cypress_runner.js:166385:14
      at tryCatcher (http://localhost:9090/__cypress/runner/cypress_runner.js:13012:23)
      at Promise._settlePromiseFromHandler (http://localhost:9090/__cypress/runner/cypress_runner.js:10947:31)
      at Promise._settlePromise (http://localhost:9090/__cypress/runner/cypress_runner.js:11004:18)
      at Promise._settlePromise0 (http://localhost:9090/__cypress/runner/cypress_runner.js:11049:10)
      at Promise._settlePromises (http://localhost:9090/__cypress/runner/cypress_runner.js:11129:18)
      at Promise._fulfill (http://localhost:9090/__cypress/runner/cypress_runner.js:11073:18)
      at http://localhost:9090/__cypress/runner/cypress_runner.js:12687:46
  From Your Spec Code:
      at Context.eval (http://localhost:9090/__cypress/tests?p=cypress/support/e2e.ts:146:147)




  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        30                                                                               │
  │ Passing:      27                                                                               │
  │ Failing:      3                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  0                                                                                │
  │ Video:        false                                                                            │
  │ Duration:     1 minute, 1 second                                                               │
  │ Spec Ran:     basicE2E.cy.ts                                                                   │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


==============================================================================

  (Run Finished)


       Spec                                              Tests  Passing  Failing  Pending  Skipped
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ✖  basicE2E.cy.ts                           01:01       30       27        3        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    ✖  1 of 1 failed (100%)                     01:01       30       27        3        -        -

 ELIFECYCLE  Command failed with exit code 3.
 ```

vikiival

Smol stuff ? I guess?

vikiival · 2022-08-05T11:26:53Z

Also as promised:

…ress-init

made some changes, ran this couple times and everything's passing

petersopko added 11 commits July 15, 2022 12:34

cypress_init_0.1

aba54dc

cypress_init_0.1.1

414ba10

cypress_init_0.1.2

6918218

testing_netlify+cypress

e493933

testing_netlify+cypress_0.2

e235304

cypress_dev_dependency

0bd3631

manually_changed_package_json_im_sorry

d0b1a8b

removing_cypress_cache

877d760

removing_prebuild_plugin

448a5fd

reset+revert_netlify_experiment

561545a

Merge remote-tracking branch 'origin/2911-cypress-init' into 2911-cyp…

c51510e

…ress-init # Conflicts: # netlify.toml # pnpm-lock.yaml

petersopko added 2 commits July 17, 2022 10:37

testing_gh_action

eec374c

testing_gh_action_2

33afece

petersopko mentioned this pull request Jul 17, 2022

Tests for critical functionality and evergreen components #2911

Closed

petersopko and others added 15 commits July 18, 2022 13:55

added_more_bsx_tests

b2c2a37

Merge remote-tracking branch 'origin/2911-cypress-init' into 2911-cyp…

62216f8

…ress-init

remove_gh_action

1f8e3e3

Merge remote-tracking branch 'upstream/main' into 2911-cypress-init

5c56b25

add_random_wallet_login

64e7a45

add_random_wallet_login

7f1c9c0

Merge branch 'main' into 2911-cypress-init

5ce02aa

custom_commands

c6b9e9a

Merge branch 'main' into 2911-cypress-init

0296856

# Conflicts: # package.json # pnpm-lock.yaml

clean_up

c829675

exploreTabs+exploreSortBy

5157901

collectionSortBy+gallerySortBy

842877e

navbar+stuff

0882e12

global_viewPort

644a2ef

handle_exceptions_globally

c12629f

kkukelka approved these changes Aug 4, 2022

View reviewed changes

kkukelka added the S-code-lgtm-✅ code review guild has reviewed this PR and it's code is approved label Aug 4, 2022

petersopko and others added 9 commits August 4, 2022 10:54

Merge remote-tracking branch 'upstream/main' into 2911-cypress-init

de3aa01

Merge remote-tracking branch 'origin/2911-cypress-init' into 2911-cyp…

3aeef81

…ress-init

remove_dev-win

55afa11

Merge branch 'main' into 2911-cypress-init

3c72027

Merge remote-tracking branch 'origin/2911-cypress-init' into 2911-cyp…

d1b2ff9

…ress-init

Merge branch 'main' into 2911-cypress-init

c12d1b4

added_desc_to_tests

02b83c6

Merge branch 'main' into 2911-cypress-init

94d1998

last_details

9c59a0d

petersopko requested a review from vikiival August 4, 2022 13:02

🔧 package json command for cypress

e971997

vikiival previously requested changes Aug 5, 2022

View reviewed changes

petersopko and others added 3 commits August 5, 2022 13:38

last_details2

2c01cfb

Merge branch 'main' into 2911-cypress-init

ce92a45

Merge remote-tracking branch 'origin/2911-cypress-init' into 2911-cyp…

2d5168c

…ress-init

petersopko enabled auto-merge August 5, 2022 11:50

vikiival self-requested a review August 5, 2022 12:00

vikiival approved these changes Aug 5, 2022

View reviewed changes

petersopko merged commit 94e8e3e into kodadot:main Aug 5, 2022

This was referenced Aug 5, 2022

Initial tests framework #2006

Closed

E2E and Unit Testing #3682

Open

yangwao mentioned this pull request Aug 26, 2022

Introduce basic testing framework #707

Closed

petersopko deleted the 2911-cypress-init branch September 13, 2022 09:06

preschian mentioned this pull request Aug 7, 2023

Install Playwright (cypress dead) #6598

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

#2911 cypress e2e #3451

#2911 cypress e2e #3451

petersopko commented Jul 16, 2022 •

edited

Loading

netlify bot commented Jul 16, 2022 •

edited

Loading

kkukelka left a comment

petersopko commented Aug 4, 2022

vikiival commented Aug 5, 2022

vikiival left a comment

vikiival commented Aug 5, 2022

#2911 cypress e2e #3451

#2911 cypress e2e #3451

Conversation

petersopko commented Jul 16, 2022 • edited Loading

PR type

What's new?

What was added:

Before submitting Pull Request, please make sure:

Optional

Had issue bounty label?

Community participation

Screenshot

netlify bot commented Jul 16, 2022 • edited Loading

✅ Deploy Preview for koda-nuxt ready!

kkukelka left a comment

Choose a reason for hiding this comment

petersopko commented Aug 4, 2022

vikiival commented Aug 5, 2022

vikiival left a comment

Choose a reason for hiding this comment

vikiival commented Aug 5, 2022

petersopko commented Jul 16, 2022 •

edited

Loading

netlify bot commented Jul 16, 2022 •

edited

Loading