-
Notifications
You must be signed in to change notification settings - Fork 14
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: screenshot testing #838
Conversation
Playwright Test Component is ready. |
Preview is ready. |
52ee9c1
to
4b2a03f
Compare
4b2a03f
to
ffe2e68
Compare
@@ -123,6 +129,8 @@ | |||
"@gravity-ui/stylelint-config": "^1.0.0", | |||
"@gravity-ui/tsconfig": "^1.0.0", | |||
"@gravity-ui/uikit": "^5.12.2", | |||
"@playwright/experimental-ct-react": "^1.38.1", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
will it work if we move it to devDependencies?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ok
playwright/README.md
Outdated
3. Writing a test: | ||
|
||
> NOTE: | ||
> Add `defaultDelay` between mounting and testing routine in every test. It is necessary because of animation in our package. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe here we can say that await defaultDelay();
it is possible solution to test animated components if they present? Because we could switch animation off and I think in this case we won't need this option
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ok
await defaultDelay(); | ||
|
||
// capture the screenshot | ||
await expectScreenshot(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
didn't get how this example is related to light and dark themes?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
the fixture expectScreenshot
inside itself makes all the arrangements to screenshot in different themes
playwright/playwright/index.tsx
Outdated
@@ -0,0 +1,3 @@ | |||
// Import styles, initialize component theme here. | |||
// import '../src/common.css'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
remove line 2?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ok
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I like Malevich, maybe we should add screenshot tests for components with visual presentation?)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ok
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ | ||
trace: 'on-first-retry', | ||
headless: true, | ||
/* Port to use for Playwright component endpoint. */ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this comment is redundant
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fyi: the image is broken
import type {PlaywrightFixture} from './types'; | ||
|
||
export const defaultDelayFixture: PlaywrightFixture<() => Promise<void>> = async ({page}, use) => { | ||
const defaultDelay = async () => await page.waitForTimeout(DEFAULT_MOUNT_TEST_DELAY); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
can we use smth like this?
await page.waitForLoadState('load');
waiting for load
event can be more robust technique for a waiting for a page to load
No description provided.