CSS is messed up while running protractor on saucelabs

Question

I have a angular application for which I wrote e2e tests using protractor. I am running my tests on saucelabs. There is a small issue with my page for instance. If my browser is not maximized some of the css gets messed up ( i do plan on fixing this in the future), and this would definitely fail some of my test cases that I wrote.

However if my browser is maximized everything is perfect. Now the issue is when I run my test on saucelabs even though the browser looks maximized (according to saucelab screenshots) my css looks messed up as it does when my browser is not maximized locally.

I did some research and found that I can use

browser.driver.manage().window().maximize();

However in my case since browser is already maximized do i need to increase screen resolution or something? Please provide suggestions

Answer 1

I actually think you probably answered this question yourself by the suggestion of increasing the resolution. Because the resolution on your local machine is probably different than the saucelabs machine. I'm not sure what the default resolution but here are the different resolutions you can specify.

I would probably match the resolution that you know works on your machine along with the maximizing of the window.

EDIT: I added your config with the resolution option

exports.config = {
    framework: 'jasmine2',
    sauceUser: 'blahblhablah',
    sauceKey: 'xyzabcdxyzabac',
    capabilities :  {
            screenResolution: "1280x1024",
        },
    multiCapabilities: multiCapabilities,
    specs: ['e2e/main.spec.js'],
    jasmineNodeOpts: {
        showColors: true,
        defaultTimeoutInterval: 30000
    },