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()
)
Code language: JavaScript (javascript)

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 ruin 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()
)
Code language: JavaScript (javascript)

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.