feat(playwright): add playwright testing #33
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
![codeclimate[bot]](https://avatars.githubusercontent.com/in/9403?s=60&v=4){kind=small}
benjaminpaige
commented
Jun 5, 2023
Comment on lines
3
to
12
| export const addIssueForm = { | ||
| addButton: (page: Page) => page.locator("_react=Button[buttonText = \"Add\"]"), | ||
| submitButton: (page: Page) => | ||
| page.locator("_react=Button[buttonText = \"Submit\"]"), | ||
| titleInput: (page: Page) => page.getByLabel("Title"), | ||
| descriptionInput: (page: Page) => page.getByLabel("Description"), | ||
| prioritySelect: (page: Page) => | ||
| page.getByRole("combobox", { name: "Priority" }), | ||
| typeSelect: (page: Page) => page.getByRole("combobox", { name: "Type" }), | ||
| }; |
There was a problem hiding this comment.
i dont love this way of doing the selectors. thinking maybe a class might work better. thoughts are welcome
jdinh8124
approved these changes
Jun 7, 2023
src/services/ui/playwright.config.ts
Outdated
Comment on lines
34
to
42
| // { | ||
| // name: "firefox", | ||
| // use: { ...devices["Desktop Firefox"] }, | ||
| // }, | ||
|
|
||
| // { | ||
| // name: "webkit", | ||
| // use: { ...devices["Desktop Safari"] }, | ||
| // }, |
There was a problem hiding this comment.
Thoughts on uncommenting these configs for other browsers? Unless we want all devs to use chronium based browsers only
There was a problem hiding this comment.
yeah thats a good idea. was there mainly for an example, but cant hurt to have them run as well 👍
|
Code Climate has analyzed commit dcd6f77 and detected 1 issue on this pull request. Here's the issue category breakdown:
View more on Code Climate. |
|
🎉 This PR is included in version 1.3.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Purpose
This change adds end to end testing via playwright to the ui service, top level
run e2escript, and gh workflow step. This is one part of two changes.Linked Issues to Close
https://qmacbis.atlassian.net/browse/OY2-23755
https://qmacbis.atlassian.net/browse/OY2-24074
Approach
We installed playwright in the ui and api services, added playwright config files in the roots of those directories, and added example tests. In the ui service these tests use a headless browser to run through actions and expectations in the local instance of the front end. In the api service these tests make calls and expectations to actual endpoints.
An e2e script was added to the run command. A step was added to the deploy workflow to set up the aws creds, install playwright browsers and run the e2e tests and upload the artifacts when complete.
You run e2e tests against a local running instance of the application by using the
run ui --stage [stage]command to deploy and init an instance of the application. A second terminal can be used to run therun e2ecommand which will run the playwright tests against the currently running instance of the ui on localhost:5000.Assorted Notes/Considerations/Learning
A pattern of selectors is used which define selectors in a separate dir and imports them for reusability.
The e2e tests for the UI service are located in
src/services/ui/e2eand defined in .spec files. examples can be found to guide how to structure tests.When defining the selectors for elements make sure to define your selectors in the
e2e/selectorsdirectory. Defining selectors using react component names and properties is preferred to maintain consistent scalable testing. Other patterns can be used such as xpath, element type/name, and id/data-id/test-id. But should only be used when necessary.