Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Incorrect screen size when resizeWindow() is called after maximizeWindow() #8157

Closed
htho opened this issue Mar 18, 2024 · 1 comment · Fixed by #8169
Closed

Incorrect screen size when resizeWindow() is called after maximizeWindow() #8157

htho opened this issue Mar 18, 2024 · 1 comment · Fixed by #8169
Assignees
@Bayheck
Labels
TYPE: bug The described behavior is considered as wrong (bug).

Comments

@htho
Copy link
Contributor

htho commented Mar 18, 2024 •
edited

What is your Scenario?

When testing my browser provider plugin I found that screen sizes are off, when resizeWindow() is called after maximizeWindow().

What is the Current behavior?

When I call resizeWindow() after maximizeWindow(),
then in Chrome (windowed mode, Windows 10) height is off by -1px,
and in Firefox (windowed mode, Windows 10) height is off by +10px and width is off by +4px.

What is the Expected behavior?

The screen size should be the size that was set by in resizeWindow().

What is the public URL of the test page? (attach your complete example)

I created a repository: https://github.com/htho/testcafe-repro-resize-after-maximize

What is your TestCafe test code?

import { fixture, test, ClientFunction } from "testcafe";

const targetWidth = 640;
const targetHeight = 480;
const targetDimensions = {width: targetWidth, height: targetHeight};

const getWindowInnerDimensions = ClientFunction(() => ({width: window.innerWidth, height: window.innerHeight}));

fixture("screenshot")
    .page("about:blank").
    // set size to something else so resize is necessary
    afterEach(async t => t.resizeWindow(targetWidth+13, targetHeight+13));

test("resizeWindow()", async t => {
    await t.resizeWindow(targetWidth, targetHeight);

    await t.expect(getWindowInnerDimensions()).eql(targetDimensions, "Window not resized properly!");
});

test("maximizeWindow() then resizeWindow() - fails", async t => {
    await t.maximizeWindow();
    
    await t.resizeWindow(targetWidth, targetHeight);
    
    await t.expect(getWindowInnerDimensions()).eql(targetDimensions, "Window not resized properly!");
});

test("maximizeWindow() then resizeWindow() twice", async t => {
    await t.maximizeWindow();
    
    await t.resizeWindow(targetWidth, targetHeight);
    await t.resizeWindow(targetWidth, targetHeight);
    
    await t.expect(getWindowInnerDimensions()).eql(targetDimensions, "Window not resized properly!");
});

Your complete configuration file

No response

Your complete test report

> .\node_modules\.bin\testcafe chrome .\test.tc.ts
 Running tests in:
 - Chrome 122.0.0.0 / Windows 10

 screenshot
 √ resizeWindow()
 × maximizeWindow() then resizeWindow() - fails

   1) AssertionError: Window not resized properly!: expected { width: 640, height: 479 } to deeply equal { width: 640, height: 480 }

      + expected - actual

       {
      -  height: 479
      +  height: 480
         width: 640
       }


      Browser: Chrome 122.0.0.0 / Windows 10

         20 |test("maximizeWindow() then resizeWindow() - fails", async t => {
         21 |    await t.maximizeWindow();
         22 |
         23 |    await t.resizeWindow(targetWidth, targetHeight);
         24 |
       > 25 |    await t.expect(getWindowInnerDimensions()).eql(targetDimensions, "Window not resized properly!");
         26 |});
         27 |
         28 |test("maximizeWindow() then resizeWindow() twice", async t => {
         29 |    await t.maximizeWindow();
         30 |

         at <anonymous> (C:\Dev\github.com\htho\testcafe-repro-resize-after-maximize\test.tc.ts:25:48)
         at fulfilled (C:\Dev\github.com\htho\testcafe-repro-resize-after-maximize\test.tc.ts:5:58)


 √ maximizeWindow() then resizeWindow() twice


 1/3 failed (14s)
> .\node_modules\.bin\testcafe firefox .\test.tc.ts
 Running tests in:
 - Firefox 123.0 / Windows 10

 screenshot
 √ resizeWindow()
 × maximizeWindow() then resizeWindow() - fails

   1) AssertionError: Window not resized properly!: expected { width: 644, height: 490 } to deeply equal { width: 640, height: 480 }

      + expected - actual

       {
      -  height: 490
      -  width: 644
      +  height: 480
      +  width: 640
       }


      Browser: Firefox 123.0 / Windows 10

         20 |test("maximizeWindow() then resizeWindow() - fails", async t => {
         21 |    await t.maximizeWindow();
         22 |
         23 |    await t.resizeWindow(targetWidth, targetHeight);
         24 |
       > 25 |    await t.expect(getWindowInnerDimensions()).eql(targetDimensions, "Window not resized properly!");
         26 |});
         27 |
         28 |test("maximizeWindow() then resizeWindow() twice", async t => {
         29 |    await t.maximizeWindow();
         30 |

         at <anonymous> (C:\Dev\github.com\htho\testcafe-repro-resize-after-maximize\test.tc.ts:25:48)
         at fulfilled (C:\Dev\github.com\htho\testcafe-repro-resize-after-maximize\test.tc.ts:5:58)


 √ maximizeWindow() then resizeWindow() twice

Screenshots

No response

Steps to Reproduce

  1. > git clone https://github.com/htho/testcafe-repro-resize-after-maximize.git
  2. > cd testcafe-repro-resize-after-maximize
  3. > npm i
  4. > npm run test

TestCafe version

3.5.0

Node.js version

21.6.2

Command-line arguments

testcafe chrome,firefox test.tc.ts

Browser name(s) and version(s)

Firefox 123, Chrome 122

Platform(s) and version(s)

Windows 10

Other

No response
@htho htho added the TYPE: bug The described behavior is considered as wrong (bug). label Mar 18, 2024
@need-response-app need-response-app bot added the STATE: Need response An issue that requires a response or attention from the team. label Mar 18, 2024
@PavelMor25 PavelMor25 added the STATE: Issue accepted An issue has been reproduced. label Mar 21, 2024
@github-actions GitHub Actions
Copy link

We appreciate you taking the time to share information about this issue. We reproduced the bug and added this ticket to our internal task queue. We'll update this thread once we have news.

@github-actions github-actions bot removed STATE: Need response An issue that requires a response or attention from the team. STATE: Issue accepted An issue has been reproduced. labels Mar 21, 2024
@Bayheck Bayheck self-assigned this Mar 25, 2024
@Bayheck Bayheck mentioned this issue Apr 9, 2024
Merged
2 tasks
Aleksey28 pushed a commit that referenced this issue Apr 29, 2024
@Bayheck
update: resize using CDP setWindowBounds (#8169)
5d5bf6f 
<!--
Thank you for your contribution.

Before making a PR, please read our contributing guidelines at

https://github.com/DevExpress/testcafe/blob/master/CONTRIBUTING.md#code-contribution

We recommend creating a *draft* PR, so that you can mark it as 'ready
for review' when you are done.
-->

## Purpose
_Describe the problem you want to address or the feature you want to
implement._

## Approach
_Describe how your changes address the issue or implement the desired
functionality in as much detail as possible._

## References
closes #8157

## Pre-Merge TODO
- [x] Write tests for your proposed changes
- [x] Make sure that existing tests do not fail

---------

Co-authored-by: Bayheck <adil.rakhaliyev@devexpress.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Bayheck Bayheck

Labels
TYPE: bug The described behavior is considered as wrong (bug).
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

update: resize using CDP setWindowBounds Bayheck/testcafe
3 participants
@htho @Bayheck @PavelMor25