getBoundingClientRect() gives different values on test run vs. in browser

[enkelmedia]

Hi! I'm using Web Test Runner and Playwright to execute tests. I'm trying to create a test for a component that will expand some content on click (think of a accordion).

I figured that one way to do this would be to mesure the height before and after the click and assert that it's higher after the click.

I'm using element.getBoundingClientRect().height before and after to get the height but noticed that the value does not change. So I figured something was wrong with my test so I run in watch-mode to open the browser and debug.

Turns out that the values in the browser console is correct, but the values in the test output is not:

Notice that the browsers says 50 before and 101 after, while the console output says 50 before and 50 after.

Code basically looks something like this:

console.log('before2',element.getBoundingClientRect().height);

// click on element
await aTimeout(1800);

console.log('after2',element.getBoundingClientRect().height);

Also tried element.offsetHeight and document.body.offsetHeight but none of these are chaning.

Any ideas as to why this is happening?

[enkelmedia]

I don't know what happened, got up thing morning and figured "I should try this on another computer". Made the test and it suddenly worked.

Got back to the same machine where I had the problem yesterday and tried again, also worked. The only thing I can think of that I did was to install a package or two and a restart.

Hopefully this was some kind of temporary thing. Sorry.