Okay after quite a bit of debugging, I finally found the issue: The browser test can't find the element to click on, because of this rule:

.mw-echo-notifications-badge {
	#pt-notifications-alert &,
	#pt-notifications-notice & {
		// ...
		// Hide the text, but keep accessible for screen-readers
		// Later we put the icons back onscreen with an opposite offset
		top: -@badge-offscreen-offset - 5px;
		// ...
}

The test searches for this element but it's outside of the screen, so it decides that it can't be clicked -- and so it times out. If you comment out that CSS rule and run the tests, they pass.

This is a huge issue; we tried to hide the text of the link before using visibility and that apparently affected some other issues, so it was changed to "top" rule - which now breaks our browser tests.

@Catrope and @matmarex any ideas on what to do ?

Just for posterity and clarity, here are the notes on the failed test:

When I click the alert badge                                # features/step_definition/badge_steps.rb:4
  timed out after 60 seconds, Element not present in 60 seconds (Watir::Wait::TimeoutError)
  ./features/step_definition/badge_steps.rb:5:in `/^I click the alert badge$/'
  features/no_javascript.feature:9:in `When I click the alert badge'

I had a hunch that the issue is that the element can't be found, so I removed ".when_present" from Echo/tests/browser/features/badge_steps.rb (temporarily, of course) and, confirming my suspicion, the error was this:

When I click the alert badge                                # features/step_definition/badge_steps.rb:4
  element located, but timed out after 30 seconds, waiting for true condition on #<Watir::Anchor: located: true; {:css=>"#pt-notifications-alert"} --> {:css=>".mw-echo-notifications-badge", :tag_name=>"a"}> (Watir::Exception::UnknownObjectException)
  ./features/step_definition/badge_steps.rb:5:in `/^I click the alert badge$/'
  features/no_javascript.feature:9:in `When I click the alert badge'

Checking through that message online ('waiting for true condition'), it seems this is what you get when the element is found in the DOM but is unclickable (outside the screen or display:none; )

As mentioned above, when I removed the top rule from the CSS, the test passed.

Being unable to click on technically offscreen elements seems like an arbitrary limitation… Ideally, we'd tell it to click on the ::before pseudoelement, but I don't see any way to do that.

Can we try to tell it to click on the parent <li> element? Or if that doesn't work like we want (I don't know if it actually moves a virtual mouse cursor somewhere and clicks, or if it sends events directly or something), to move the cursor to the position of the <li> element and then click there?

Change 348006 had a related patch set uploaded (by Bartosz Dziewoński):
[mediawiki/extensions/Echo@master] Fix browser tests

https://gerrit.wikimedia.org/r/348006

Change 348006 merged by jenkins-bot:
[mediawiki/extensions/Echo@master] Fix browser tests

https://gerrit.wikimedia.org/r/348006