feature: Support Lit elements in component testing

[simonireilly]

What would you like?

I'd like to be able to run component tests against my lit elements in Cypress.

I've demonstrated the solution here https://dev.to/simonireilly/cypress-component-tests-for-lit-elements-web-components-45oj and would submit a pull request coping the patterns of the svelta plugin.

Why is this needed?

Testing web components in real browsers is more advantageous than any other environment.

Because cypress offers

• chromium
• WebKit
• electron
• quantum

Based browser's, it's a great choice for testing web components.

Other

No response

[simonireilly]

This feature isn't currently going to enter cypress.

If your looking to use cypress for lit, or any other web components, try this:

https://www.npmjs.com/package/cypress-lit
https://github.com/simonireilly/cypress-lit

[lmiller1990]

We have a public API for this feature now.

• Docs: https://docs.cypress.io/guides/component-testing/third-party-definitions
• Example implementation (solid.js, copy+pasted mostly from here) https://github.com/lmiller1990/cypress-ct-solid-js
• Template: https://github.com/cypress-io/cypress-ct-definition-template

If there is interest from @simonireilly, we can collab to create cypress-ct-lit which would do what is proposed here - first class integration w/ Cypress CT (including onboarding and scaffolding the supportFile with mount, etc).

[Darrenbydesign]

I am interested in Cypress with support for Lit! I came across Simon's approach and I'd really like it added as a collaboration so that I can use it in my org.