Today I was writing a playwright test that needed to do some calculations on an element’s coordinates. No problem right? Just get the DOMRect object from
getBoundingClientRect and go about your day.
const rect = await page.$eval('.some-class', element => element.getBoundingClientRect() )
Easy, expect that
rect was an empty object.
It took me a second to figure out, but it appears that DOMRect is not serialized correctly. If you weren’t expecting it then it will really ruins your morning. If you check the object inside the
$eval it has values but not outside.
One solution, and the one I went with, is to pre-serialize by calling
toJSON as shown below. This solves the issue for me.
const rect = await page.$eval('.some-class', element => element.getBoundingClientRect().toJSON() )
My only issue is that this is not really intuitive and unless you’ve run into this issue before you’re going to have a bad time.