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

[Cypress 14.x] Unable to modify window properties in 'window:before:load' callback #31013

Open
mmisty opened this issue Feb 3, 2025 · 3 comments
Open

[Cypress 14.x] Unable to modify window properties in 'window:before:load' callback #31013

mmisty opened this issue Feb 3, 2025 · 3 comments
Labels
stage: needs information Not enough info to reproduce the issue

Comments

@mmisty
Copy link

mmisty commented Feb 3, 2025

Current behavior

With cypress 13.x the following code worked well (proxy was applied and when the app asked for window.screen.width it returned proper mocked value) :

Cypress.on('window:before:load', (win: Window) => {
      (win as any).screen =  new Proxy(win.screen, {
          get(target, prop) {
            if (prop === 'width' || prop === 'availWidth') {
              return myWidth;
            }
      
            if (prop === 'height' || prop === 'availHeight') {
              return myHeight;
            }
      
            return target[prop];
          }
        });
  });

After upgrading to 14.x this stopped working and only works in Cypress.on('window:load', (win: Window) => {

Desired behavior

The following code to make changes to window object:

Cypress.on('window:before:load', (win: Window) => {
      (win as any).screen =  new Proxy(win.screen, {
          get(target, prop) {
            if (prop === 'width' || prop === 'availWidth') {
              return myWidth;
            }
      
            if (prop === 'height' || prop === 'availHeight') {
              return myHeight;
            }
      
            return target[prop];
          }
        });
  });

Test code to reproduce

in setup.ts / setup.js / index.ts / e2e.ts
add thie following:

Cypress.on('window:before:load', (win: Window) => {
      (win as any).screen =  new Proxy(win.screen, {
          get(target, prop) {
            if (prop === 'width' || prop === 'availWidth') {
              return 300;
            }
      
            if (prop === 'height' || prop === 'availHeight') {
              return 300;
            }
      
            return target[prop];
          }
        });
  });

Start any test with cypress and in dev console write window.screeen.width - it should show '300'.

Cypress Version

14.0.1

Node version

18.12.0

Operating System

macOS 15.3 / linux Debian

Debug Logs



Other


No response

      		
    

      
  





        



            

              
            

        

      


      
    








      

    



      

  
      



  

  @jennifer-shehane





  


    

      

  

    

        
    
    

  


      
          
  
      
            Copy link

  

      
    

  


  

      

  
  Member


      

  


  

    

  





      


        


  
    

      
          
@mmisty I cannot recreate this issue with the given information. Can you provide a full example, showing where the window.screen.width is not correct?


test.cy.js


Cypress.on('window:before:load', (win) => {
      (win).screen =  new Proxy(win.screen, {
          get(target, prop) {
            if (prop === 'width' || prop === 'availWidth') {
              return 300;
            }
      
            if (prop === 'height' || prop === 'availHeight') {
              return 300;
            }
      
            return target[prop]
          }
        })
  })

it('Test', () => {
    cy.visit('index.html')
    cy.window().its('screen').its('width').should('eq', 300)
    cy.window().its('screen').its('height').should('eq', 300)
})


Image

      		
    

  





        


            

            

              
            

        

      


      

            
  

    
  
    
    

  

  



    












      

  
            

    

      
    

    


      

          @jennifer-shehane
jennifer-shehane




          added
  the 

  stage: needs information

  Not enough info to reproduce the issue
 label


      Feb 3, 2025

    

  








      

  
      



  

  @mmisty





  


    

      

  

    

        
    
    

  


      
          
  
      
            Copy link

  

      
    

  


  

      



      

  Author


  


  

    

      

      
            mmisty
  

      

      

      commented


        Feb 3, 2025


      
    


  





      


        


  
    

      
          
@jennifer-shehane Sure! Apologies for the lack of information earlier.

The code is the same as what you have, but after the test finishes, open the dev console in your browser and type window.screen.width

Previously (with version 13.x), this returned 300, but now the value stays unchanged.

Image

This is crucial because our web app determines the screen size using this property (which, of course, is done without Cypress).

Let me know if you need more info.

Thank you for prompt response!

      		
    

  





        


            

            

              
            

        

      


      

            
  

    
  
    
    

  

  



    












      

  
      



  

  @mmisty





  


    

      

  

    

        
    
    

  


      
          
  
      
            Copy link

  

      
    

  


  

      



      

  Author


  


  

    

      

      
            mmisty
  

      

      

      commented


        Feb 3, 2025


      
  •

  

    
      

        
          edited by jennifer-shehane
          
        
        
      

    
    
      
        
      Loading

      
    
  



    


  





      


        


  
    

      
          
@jennifer-shehane

Sorry for misleading you,  I expect this code to work:


beforeEach(() => {
  Cypress.on('window:before:load', win => {
    (win as any).screen = new Proxy(win.screen, {
      get(target, prop) {
        if (prop === 'width' || prop === 'availWidth') {
          return 300;
        }

        return target[prop];
      },
    });
  });
});

it('should have width', () => {
  cy.intercept('mytest.com**', {
    body: `<html><head></head><body>Hello</body></html>
    <script>
      console.log('window.screen.width', window.screen.width); // here should be 300
    </script>`,
  });
  cy.visit('mytest.com');
  cy.window().its('screen').its('width').should('eq', 300);
});


But seems it works identically in both versions 13.17 and 14.0. Seems there is something else with our configuration

I'll update you when find it.

      		
    

  





        


            

            

              
            

        

      


      

            
  

    
  
    
    

  

  



    
















  
  

    

      

  





  




  
  

              

  
    Sign up for free
    to join this conversation on GitHub.
    Already have an account?
    Sign in to comment


  



  






  
                  




    

  


      
  

    Assignees
  



        

    No one assigned







      


  


  

    Labels
  



    

      

    stage: needs information

  Not enough info to reproduce the issue








      

  

    

        

    Projects
  


        




    None yet




  



      


  

    
  

    Milestone
  


      No milestone





    
      
          


  

    
      

        
    

    Development
  




          
    
No branches or pull requests







    
  




      

    

  
      

  

    

      2 participants
    

    

        
          @jennifer-shehane 
        
          @mmisty