Following moving elements across the document

Xetera commented 2 years ago

On sites with high CLS scores, the element that's being clicked on will sometimes miss due to page reflow changing the position of the target between the time its coordinates are read, and the mouse moving to its location.

This change makes the move function check whether it's overlapping with the coordinates of the element being clicked on before moving on to perform the click. It will retry to move to its new location up to a configurable amount of times before throwing an error.

https://user-images.githubusercontent.com/24978328/170891010-f711a5d0-3723-4f25-af21-24634e458326.mov

It also includes:

Groundwork for unit tests with jest-puppeteer + swc
Some formatting fixes with npx ts-standard --fix
Edge case fix with mouse-helper where it wouldn't attach to a page that already loaded (specifically when using page.setContent)

Closes #49

Xetera commented 2 years ago

Yeah I'm really not sure what that's about... I linted the entire thing with yarn ts-standard --fix locally and it doesn't throw any errors for me. Do I need to specify the test file somewhere for ts-standard?

Niek commented 2 years ago

Yeah I'm really not sure what that's about... I linted the entire thing with yarn ts-standard --fix locally and it doesn't throw any errors for me. Do I need to specify the test file somewhere for ts-standard?

I fixed it now in https://github.com/Xetera/ghost-cursor/pull/54/commits/d75ca3e7f747ae0b720b46b506c05ce6f05d483b

Edit: apparently not? Although it's working fine in my local env, weird...

Edit 2: fixed now

Xetera commented 2 years ago

Ah great, thanks a lot

Xetera / ghost-cursor

Following moving elements across the document #54