[Android] toBeVisible fails when a view has overflowed beyond the bounds of its containing view #4688
Description
What happened?
On Android, toBeVisible expectations in a Detox test fail for a view that has overflowed beyond the bounds of the parent view (even if the view is still "visible" on screen)
e.g.
Given a view hierarchy like:
<View style={{width: '100%', height: 100, backgroundColor: 'blue'}}>
<View testID='test_ID' style={{position: 'absolute', top: 150, width: '100%', height: 100, backgroundColor: 'red'}} />
</View>A test for toBeVisible() of 'test_ID' fails.
await waitFor(element(by.id('test_ID'))).toBeVisible().withTimeout(500);
await expect(element(by.id('test_ID'))).toBeVisible();What was the expected behaviour?
Because the view is still entirely "visible" on screen, I would expect the toBeVisible expectation to return true, even if the view has overflowed beyond the bounds of the parent.
In fact, iOS under these exact same conditions returns true and passes.
Was it tested on latest Detox?
- I have tested this issue on the latest Detox release and it still reproduces.
Did your test throw out a timeout?
- I have followed the instructions under Identifying which synchronization mechanism causes us to wait too much.
Help us reproduce this issue!
The code samples provided above is likely sufficient to reproduce this issue, although for convenience, I've also forked Detox and implemented an example test within the demo-react-native example project, and I verified this problem reproduces there.
Please see: jjpriest25@201b763
In what environment did this happen?
Detox version: 20.32.0
React Native version: 0.76.3
Node version: 23.1.0
Emulator: Pixel_3a_API_34
Detox logs
15:55:48.629 detox[54815] i Demo Overflow: find overflow view [FAIL]
FAIL e2e/suite1.test.ts (36.231 s)
Demo Overflow
✕ find overflow view (600 ms)
● Demo Overflow › find overflow view
Test Failed: 0.5sec timeout expired without matching of given matcher: (view has effective visibility <VISIBLE> and view.getGlobalVisibleRect() covers at least <75> percent of the view's area)
7 |
8 | it('find overflow view', async () => {
> 9 | await waitFor(element(by.id('test_ID'))).toBeVisible().withTimeout(500);
| ^
10 | await expect(element(by.id('test_ID'))).toBeVisible();
11 | });
12 | });
at Object.<anonymous> (suite1.test.ts:9:60)
Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
Snapshots: 0 total
Time: 36.283 s
Ran all test suites matching /e2e/i.
15:55:48.762 detox[54742] E Command failed with exit code = 1:
jest --config e2e/jest.config.js e2e
Device logs
No response
More data, please!
As an illustration of what these views look like, I'll attach a screenshot of both iOS Simulator and Android emulator. The Blue view is the parent, and the red view is the child which has overflowed entirely beyond the bounds of the parent, yet it is still clearly visible on screen.
I believe this issue may have been introduced by #4519 (version 20.24.0).