#74 Installed Playwright and add in to CI/CD pipeline #92
Conversation
vmaineng
commented
Mar 25, 2024
•
vmaineng
commented
- Installed Playwright (pnpm)
- Added in Playwright to ci.yaml file
- Added to Jest testing to ignore Playwright testing in this specific file
- Tested playwright example tests ran correctly
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
playwright.config.ts
Outdated
| use: { ...devices['Desktop Safari'] }, | ||
| }, | ||
|
|
||
| /* Test against mobile viewports. */ |
There was a problem hiding this comment.
Hey Shashi! Would you please elaborate as to why Desktop Safari should be removed? I believe it's not as popular but I can still see Safari being used to this day. Please let me know. :) Thanks!
There was a problem hiding this comment.
I figured you removed it because they are commented out. If it's not meant to be commented out, bring it back.
There was a problem hiding this comment.
I deleted the commented code.
playwright.config.ts
Outdated
| * See https://playwright.dev/docs/test-configuration. | ||
| */ | ||
| export default defineConfig({ | ||
| testDir: './tests', |
There was a problem hiding this comment.
How do you envision the structure of our test files? How will the file directory look like and where will the test files live? For example, if I have a component named Test.tsx, where will it's test file live in the folder structure?
There was a problem hiding this comment.
Hey Shashi! After doing some research,
-
for unit testing:
the test files will have same co-location as the component file it's being tested on -
for integration and E2E testing:
It appears there is a top level directory folder named "playwright" that will consists of the tests.
For this line of code, I'd recommend changing the name folder from "tests" to "playwright" to show that it is E2E testing.
Please let me know what your thoughts are. Thanks!
There was a problem hiding this comment.
I'd suggest keeping the test files together all in one directory. Giving them different file naming patterns will help determine which file is which. Also, I don't think this path will work for individual tests. I believe this is pointing to a root directory instead of the component directory themselves. Please test this out. Ensure that it will work inside directories and outside. Meaning, if it's named hello.spec.ts and lives inside /components/hello/hello.spec.ts, it should execute.
There was a problem hiding this comment.
@shashilo I modified testDir: './tests', to testDir: './', and tested tests would be able to run from any directories they reside in. Please let me know if you have any other observations. Thanks!
.gitignore
Outdated
| #playwright | ||
| /test-results/ | ||
| /playwright-report/ |
There was a problem hiding this comment.
Is this something we want to ignore? We will eventually create a deployment that can output the Playwright report so the person creating the PR can see this.
There was a problem hiding this comment.
@shashilo Thanks for explaining, Shashi. I will remove from the .gitignore file.
README.md
Outdated
|
|
||
| ## React Testing Library (RTL) && Jest | ||
|
|
||
| Install dependencies |
There was a problem hiding this comment.
We need to remove the installation from our dependencies. 1 installation is all a new user would need to run. Then the specific commands would be needed for the docs.
There was a problem hiding this comment.
@shashilo Thanks for clarifying. I removed the pnpm i since only 1 installation is needed and left specific commands on how to run tests.
…vivor into playwright
* installed playwright and added into the CICD pipeline * added in Playwright and RTL in ReadMe * cleaned up package.json * deleted commented code that was not used and updated file directory for tests * deleted test examples directories and modified test files * removed test result and playwright report from .gitignore * installed newest dependencies * added in action-setupv2 in ci.yml * removed the line I added * revert pnpm install back to pnpm ci * modified ci.yml with cache * revert changes back * commented out mobile views * indented playwright testing * modified indentation of yaml file * revert back identation * revert changes * added in different install * removed test files * removed test folders * added in example test file * removed test example * added in path to ignore playwright tests * removed test results and playwright report out of .gitignore
