chore(testkit): add playwright test drivers #2561
Conversation
packages/testing-kit/src/index.ts
Outdated
There was a problem hiding this comment.
Do you find this separation to categories helpful? Because we keep the components folder structure flat. I don't mind having this structure, just wondering what's the benefits
There was a problem hiding this comment.
we made the separation as in core/.storybook/preview.tsx, I think it would be easier to import drivers if they are categorized by types. If you think otherwise i don't mind changing it.
| actionTimeout: 30000, | ||
| bypassCSP: true, | ||
| launchOptions: { | ||
| args: ["--disable-web-security"] |
There was a problem hiding this comment.
yes it's a launch argument in chrome that prevents same-origin policy issues. We probably do not need it at this point but I added it just in case our tests would need additional navigations in the future. For example if we run both core and style and need to navigate in between them.
| import { test, expect } from '@playwright/test'; | ||
| import { Button } from '../buttons/Button'; // Assuming you have this Button class | ||
|
|
||
| test('should fire a click event and log to console', async ({ page }) => { |
There was a problem hiding this comment.
Do these test rely on the core package? I thought it's suppose to be the other way around, no?
There was a problem hiding this comment.
we need to run storybook in core to run these tests. Playwright can start storybook by itself and run the tests.
packages/testing-kit/src/index.ts
Outdated
| let textfieldLocator | ||
|
|
||
| test.beforeEach(async ({ page }) => { | ||
| await page.goto("/?path=/story/inputs-textfield--overview"); |
There was a problem hiding this comment.
Is there a better way to handle it? If the paths will change it will break tests
There was a problem hiding this comment.
i moved the paths to a separate file it would make it easier to maintain that way but I don't see anyway we could avoid breaking tests if paths change because it purely depends on core.
talkor
changed the title
This PR adds playwright drivers to vibe as a separate package. The playwright drivers mimic vibe components functionality by using playwright test. This would allow developers to import vibe based page object modules directly to their e2e projects.