Skip to content
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

DX: Webform styling #1347

Open
4 tasks
pmelab opened this issue May 5, 2023 · 0 comments
Open
4 tasks

DX: Webform styling #1347

pmelab opened this issue May 5, 2023 · 0 comments

Comments

@pmelab
Copy link
Contributor

pmelab commented May 5, 2023

The current developer experience when styling webforms is cumbersome and error prone because Drupal javascript behaviors and additional stylesheets can't easily be replicated in storybook and therefore can't be reliably visual regression tested. Also, Drupal updates are not automatically reflected.

What we would like to achive:

  • Example webform pages are displayed as storybook stories (including all drupal assets)
  • Webform pages are visually tested in chromatic
  • Updates to Drupal or Webform are reflected in tests
  • Also works for non-Webform embeds (e.g. Drupal commerce)

Idea to solve this:

Playwrights "traces" are archives of the full current webpage, including all assets. We could use that to:

  1. Create a playwright test that runs trough the Drupal webform and generates the traces for different form steps.
  2. Find a way to import a trace including all assets (iframe?) into a storybook story
  3. Inject the UI stylesheet to style the form in storybook
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant