Bug with flex-direction: column-reverse

This is a React app that mimics the DOM structure of a real chat application.

On top of the chat, there is a link with id showMore, that is used to show older messages. Right after that link, there are all the chat messages.

Now, I want to test what happens when the user clicks the #showMore element. As there are many messages, and we have the last message into view, the test code needs to scroll up, until the #showMore element is visible.

The application code is in src/App.js and, most importantly, in src/App.css.

The bug is triggered by src/App.css line 62: The Scrollable div has the flex:direction: column-reverse CSS property, because on chat applications we want to keep the chat scrolled to the bottom.

The failing test is in tests/test.js.

To reproduce the bug:

First of all, get all the required dependencies with:

npm install

To start the app, run:

npm start

While the app is running, on another terminal, run:

npx testcafe chromium tests/

Of course, you can replace chromium with chrome or firefox.

I don't recommend using headless mode, as I want to show you that scrolling with the DOM methods actually works, and that's the reason behind all the await t.wait(3000); calls in the test code.

Expected result

All 4 tests pass (one great feature of testcafe is that any element that we want to interact with is automatically scrolled into view).

Actual result

Only the first test passes.

Notice how calling the DOM method actually scrolls the list, and the desired element is scrolled into view.

From the second test on, they all fail with the error:

The element that matches the specified selector is not visible.

Notice also how the list fails to scroll.

It's also not possible to bypass this problem by first scrolling with DOM methods and then calling the click function (as shown by the scroll before click test).