test: add and configure cypress tests #410
Conversation
cypress/e2e/basicTests.cy.ts
Outdated
| const restaurantPlacardSelector = 'li.place-card__list-item' | ||
| const dropdownSelector = '.location-dropdown__button-text' | ||
| const dropdownOptionsSelector = 'li button.location-dropdown__list-button' | ||
| const footerSelector = '.footer' | ||
| const placeCardCitySelector = '.place-card__city' | ||
| const linkOfRestaurantSelector = '.place-card__name-link' |
There was a problem hiding this comment.
Are you familiar with the Cypress practices for query priority?
We should avoid using class selectors like this and try to access the content in the order of 1. accessible queries, 2. semantic queries, and 3. test ids.
There was a problem hiding this comment.
Thanks. I will study about this and make the changes accordingly. I was previously unaware of this practice. Thank you for pointing it out. :)
There was a problem hiding this comment.
@shyambh this is looking good!
There are a few things I would like to comment on, but I think it makes sense to make put the tests in a separate PR so we can get the Cypress dependency added and set up so that other tests can be worked on in parallel. Would you mind creating a separate PR to review these tests?
|
Will you add a |
|
Sure, let me apply that as well. |
|
Can you please take a look @yosevu ? |
|
The test script looks good @shyambh. I also asked to remove Also, will you rebase your branch? If you are unfamiliar with rebasing, please see this article. |
I have added the Cypress package dependency in the package.json and also updated the tsconfig.json as per the official Cypress documentation:
https://docs.cypress.io/guides/tooling/typescript-support#Configure-tsconfig-json
The tests point to https://eats.seesparkbox.com/refresh for now and can be run in CLI as well as GUI-mode.
The following command will run the tests in CLI :
yarn cypress runBelow is the screenshot of the test run summary :