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.
Today we disemvowel a string. That word is beautiful and means to remove every vowel out of a string. Disemvowel it!
Today I take a break from reading and tackle the simple problem of counting bits in Rust. This is my first Rust solution.
Today I’m looking at functions and loops. They are an important part of any language and deserve a closer look.
Today I take a look at Rust variables and data types. It’s a gentle introduction to a language not too alien from JavaScript.
Today I take a look at cargo, Rust’s answer to npm and yarn. It’s a tool that makes a developer’s life that much easier.