Protractor: Size of screen

Question

I use this property to define the width and height's screen:

var width = 1280;
var height = 600;
browser.driver.manage().window().setSize(width, height);

In the method onPrepare() but this code is functional for some tests, not for all of them. Why is that? I don't redefine the screen's size in my tests.

Regards,

Johnny

Edit : My version of Node is 0.10.33 with Protactor 2.5.1 .

Protractor's conf :

// Fichier de configuration pour Angular

exports.config = {
    sauceUser: "",
    sauceKey: "",

    capabilities: {
        'browserName': 'chrome',
        'name': 'Protractor Circle CI'
    },

    specs: ["src/Bg/*Bundle/Tests/Angular/*Test.js"],
    exclude: ['src/Bg/*Bundle/Tests/Angular/*AuthTest.js', 'src/Bg/*Bundle/Tests/Angular/*RapideTest.js'],

    baseUrl: "http://bluegrey.circle.dev:8080/app_ci.php",

    onPrepare: function() {
        browser.driver.get('http://bluegrey.circle.dev:8080/app_ci.php/fr_FR/login');

        browser.driver.findElement(by.id('username')).sendKeys('[email protected]');
        browser.driver.findElement(by.id('password')).sendKeys('userpass');
        browser.driver.findElement(by.id('_submit')).click();

        return browser.driver.wait(function() {
            return browser.driver.getCurrentUrl().then(function(url) {
                return /dashboard/.test(url);
            });
        }, 600000);

        var width = 1280;
        var height = 600;
        browser.driver.manage().window().setSize(width, height);
    },

    jasmineNodeOpts: {
        showColors: true,
        defaultTimeoutInterval: 30000
    }
};

An example of test which works :

describe("Carrière > Centre d'interêt", function () {
    describe("Tests d'ajout et de suppression d'un centre d'interêt", function () {
        beforeEach(function () {
            // on compte le nombre d'element
            elements = element.all(by.css('.bloc__defaut'));
            elements.count().then(function (nbElementP) {
                nbElement = nbElementP;
            });
        }, 60000);

        it('GET /app_ci.php/fr_FR/dashboard/career/interest', function () {

            browser.get('/app_ci.php/fr_FR/dashboard/career/interest');
        }, 60000);

        it("Ajout du centre d'interêt", function () {


            // On clique sur ajouter
            element(by.css('.btn-add-js')).click();

            // On remplit le formulaire
            browser.findElement(by.id('CentreInteret_intitule')).sendKeys('CentreInteret_intitule');
            element(by.css('.u-btn-inverse')).click();

            // on re-compte le nombre d'element
            expect(elements.count()).toEqual(nbElement+1);
        }, 60000);

        it("Suppression d'un centre d'interêt", function () {

            // On regarde si toutes les fenetres de suppressions sont cachés au début
            expect(element(by.css('.bloc__suppression')).isDisplayed()).toBeFalsy();

            // On clique sur supprimer
            element(by.css('.u-btn-alert')).click();

            // On regarde si la fenetre de confirmation de suppression est présente
            expect(element(by.css('.bloc__suppression')).isDisplayed()).toBeTruthy();

            // On clique sur supprimer
            element(by.css('.btn-supprimer-js')).click();

            // On regarde si l'element est caché
            expect(element(by.css('.bloc__suppression')).isDisplayed()).toBeFalsy();

        }, 60000);
    });
});

And a test which fails :

describe('Carrière > Experience Pro', function () {
    describe("Tests d'ajout et de suppression d'une experience pro", function () {
        beforeEach(function () {
            // on compte le nombre d'element
            elements = element.all(by.css('.bloc__defaut'));
            elements.count().then(function (nbElementP) {
                nbElement = nbElementP;
            });
        }, 60000);

        it('GET /app_ci.php/fr_FR/dashboard/career/professionalexperiences', function () {

            browser.get('/app_ci.php/fr_FR/dashboard/career/professionalexperiences');
        }, 60000);

        it('Vérification si lors du clique de la checkbox le champs date se désactive', function () {
            // On clique sur ajouter
            element(by.css('.btn-add-js')).click();

            // On regarde si par defaut les champs ne sont pas désactivés (= active)
            expect(element(by.id('ExperiencePro_dateFin_day')).getAttribute('disabled')).toBeFalsy();
            expect(element(by.id('ExperiencePro_dateFin_month')).getAttribute('disabled')).toBeFalsy();
            expect(element(by.id('ExperiencePro_dateFin_year')).getAttribute('disabled')).toBeFalsy();

            // On clique
            element(by.id('ExperiencePro_enPosteajout')).click();

            // On regarde si les champs sont desactivés
            expect(element(by.id('ExperiencePro_dateFin_day')).getAttribute('disabled')).toBeTruthy();
            expect(element(by.id('ExperiencePro_dateFin_month')).getAttribute('disabled')).toBeTruthy();
            expect(element(by.id('ExperiencePro_dateFin_year')).getAttribute('disabled')).toBeTruthy();

            // On regarde s'ils se redésactive
            element(by.id('ExperiencePro_enPosteajout')).click();
            expect(element(by.id('ExperiencePro_dateFin_day')).getAttribute('disabled')).toBeFalsy();
            expect(element(by.id('ExperiencePro_dateFin_month')).getAttribute('disabled')).toBeFalsy();
            expect(element(by.id('ExperiencePro_dateFin_year')).getAttribute('disabled')).toBeFalsy();
        }, 120000);

        it("Réglage du format de date", function () {


            // Format mois/année
            element(by.id('reglageDate-js')).click();
            element(by.id('ExperiencePro_formatDate_1')).click();
            expect(element(by.id('ExperiencePro_dateDebut_day')).isDisplayed()).toBeFalsy();
            expect(element(by.id('ExperiencePro_dateDebut_month')).isDisplayed()).toBeTruthy();
            expect(element(by.id('ExperiencePro_dateDebut_year')).isDisplayed()).toBeTruthy();

            // Format année
            element(by.id('reglageDate-js')).click();
            element(by.id('ExperiencePro_formatDate_2')).click();
            expect(element(by.id('ExperiencePro_dateDebut_day')).isDisplayed()).toBeFalsy();
            expect(element(by.id('ExperiencePro_dateDebut_month')).isDisplayed()).toBeFalsy();
            expect(element(by.id('ExperiencePro_dateDebut_year')).isDisplayed()).toBeTruthy();

            // Format année
            element(by.id('reglageDate-js')).click();
            element(by.id('ExperiencePro_formatDate_0')).click();
            expect(element(by.id('ExperiencePro_dateDebut_day')).isDisplayed()).toBeTruthy();
            expect(element(by.id('ExperiencePro_dateDebut_month')).isDisplayed()).toBeTruthy();
            expect(element(by.id('ExperiencePro_dateDebut_year')).isDisplayed()).toBeTruthy();


        }, 60000);

        it("Ajout de l'experience", function () {


            // On remplit le formulaire
            browser.findElement(protractor.By.css('#ExperiencePro_dateDebut_day option[value="1"]')).click();
            browser.findElement(protractor.By.css('#ExperiencePro_dateDebut_month option[value="12"]')).click();
            browser.findElement(protractor.By.css('#ExperiencePro_dateDebut_year option[value="2000"]')).click();
            element(by.id('ExperiencePro_enPosteajout')).click();
            element(by.id('reglageDate-js')).click();
            element(by.id('ExperiencePro_formatDate_0')).click();
            browser.findElement(by.id('ExperiencePro_poste-ajout')).sendKeys('ExperiencePro_poste');
            browser.findElement(by.id('ExperiencePro_entreprise')).sendKeys('ExperiencePro_entreprise');
            browser.findElement(by.id('ExperiencePro_ville')).sendKeys('ExperiencePro_ville');

            element(by.css('.u-btn-inverse')).click();

            // on re-compte le nombre d'element
            expect(elements.count()).toEqual(nbElement+1);
        }, 60000);

        it("Suppression d'une experience", function () {

            expect(element(by.css('.bloc__suppression')).isDisplayed()).toBeFalsy();

            // On clique sur supprimer
            element(by.css('.u-btn-alert')).click();

            // On regarde si la fenetre de confirmation de suppression est présente
            expect(element(by.css('.bloc__suppression')).isDisplayed()).toBeTruthy();

            // On clique sur supprimer
            element(by.css('.btn-supprimer-js')).click();

            // On regarde si la fenetre affirmant la suppression est apparue
            expect(element(by.css('.bloc__suppression')).isDisplayed()).toBeFalsy();

        }, 60000);
    });
});

Edit 2 : It's maybe a viewport's problem instead of screen size's problem. I tried on Chrome, Firefox, Safari with SauceLabs and it's same problem.

Answer 1

You are actually returning from the onPrepare() function even before the setSize() is called:

onPrepare: function() {
    browser.driver.get('http://bluegrey.circle.dev:8080/app_ci.php/fr_FR/login');

    browser.driver.findElement(by.id('username')).sendKeys('[email protected]');
    browser.driver.findElement(by.id('password')).sendKeys('userpass');
    browser.driver.findElement(by.id('_submit')).click();

    // HERE!!
    return browser.driver.wait(function() {
        return browser.driver.getCurrentUrl().then(function(url) {
            return /dashboard/.test(url);
        });
    }, 600000);

    var width = 1280;
    var height = 600;
    browser.driver.manage().window().setSize(width, height);
},

You should either remove the "return", or set the browser window size before it.

You can also return a promise returned by setSize() - in this case protractor would wait for the promise to be resolved before executing the tests:

return browser.driver.manage().window().setSize(width, height);

They now even have this "feature" documented:

onPrepare can optionally return a promise, which Protractor will wait for before continuing execution. This can be used if the preparation involves any asynchronous calls, e.g. interacting with the browser. Otherwise Protractor cannot guarantee order of execution and may start the tests before preparation finishes.