add hoverElemAt/clickElemAt to README.md

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: