diff --git a/README.md b/README.md index dc4e1df2..abc23a51 100644 --- a/README.md +++ b/README.md @@ -173,6 +173,24 @@ it('should click on element', async() => { }); ``` +To hover or click on a specific element with offset relative its origin (top-left corner), use `hoverElemAt(elem, x, y)` and `clickElemAt(elem, x, y)`. Useful for reducing shadowRoot snooping and element offset calculations. + +```javascript +import { clickElemAt, hoverElemAt } from '@brightspace-ui/testing'; + +it('should click element with offset from element origin', async() => { + const elem = await fixture(...); + await clickElemAt(elem, 25, 50); + // do assertions +}); + +it('should hover element with offset from element origin', async() => { + const elem = await fixture(...); + await hoverElemAt(elem, 25, 50); + // do assertions +}); +``` + Alternatively, to hover over or click at viewport coordinates with the mouse, use `hoverAt(x, y)` or `clickAt(x, y)`: ```javascript @@ -593,7 +611,7 @@ my-elem { my-elem.faded-out { opacity: 0; } -@media (prefers-reduced-motion: no-preference) { +@media (prefers-reduced-motion: no-preference) { my-elem { transition: opacity 0.2s ease-in-out; } @@ -628,7 +646,7 @@ Refer to the [vdiff GitHub Action](https://github.com/BrightspaceUI/actions/tree ### Generating the Goldens -To ensure a consistent environment, goldens checked into source control should be generated by [continuous integration](#continuous-integration). +To ensure a consistent environment, goldens checked into source control should be generated by [continuous integration](#continuous-integration). However, it can be helpful during development to generate a local version of the goldens to test and preview changes. This can be done by passing the `golden` sub-command: