Lab8 Protractor

#Lab 8 - Protractor

Objectif

Utiliser Protractor

Vous allez :

• Ecrire un test Protractor
• Le lancer via un container Docker

Préparation

Allez dans le dossier /vagrant/yeomanlab.

documentation

• https://github.com/yeoman/generator-angular
• http://jasmine.github.io/2.1/introduction.html
• https://github.com/angular/protractor

Ecrivez le test

Le squelette de test et la configuration sont disponibles dans /vagrant/samples/. Copiez les sous test/e2e et étudiez le fichier de test.

Lancez le test

Lancez le test en démarrant le container docker

$ sudo docker run -—name protractor  -—volume $PWD:/opt/protractor/project  -—env TEST_FILE=test/e2e/protractor.conf.js  cfalguiere/protractor-test

ua deuxième essai le container existe déjà. Vous devez le supprimer avant de la récréer.

Le script run-protractor qui se trouve dans /vagrant/samples/tools/ permet de lancer plus facilement le test.

Copiez le répertoire tools dans le projet et lancez la commande suivante :

$ bash tools/run-protractor.bash

Ecrivez le test

Complétez les tests des specs.

Conseils :

• Vous pouvez récupérer les éléments de la liste en utiliser element.all(by.repeater(...)) et la valeur du ng-repeat
• Vous pouvez récupérer un champ bindé avec element(by.model(...)) et la valeur du ng-model
• Vous pouvez utiliser le tag name, la classe CSS ou l'id pour rechercher un élément avec by
• Vous pouvez obtenir le texte (getText) ou l'attribut (getAttribute) d'un élement, cliquer dessus (click) ou entrer un texte (sendKeys)
• Pour tester le bouton voir aurez peut être besoin de lui rajouter un id dans player.html

Solution :

'use strict';
describe('Player view End-2-End', function() {
    var playerTable
    var newPlayer

    beforeEach(function() {
      browser.get("#/player");

      playerTable = element.all(by.repeater('player in players'))
      newPlayer = element(by.model('newPlayer'))
    })

    describe('When Main view appears', function() {

      it('has the title Players', function() {

         expect(element(by.tagName('h2')).getText()).toBe('Players')

      })

      it('should show a list of players', function() {

         expect(playerTable.count()).toBe(2)

      })

      it('has an input field that shows What is your name? as a placeholder', function() {

         expect(newPlayer.getAttribute('placeholder')).toBe('What is your name?')

      })
    });

    describe('When user enter a player', function() {

      it('should be added to the players list', function() {
        element(by.model('newPlayer')).sendKeys('Chris');
        element(by.id('addPlayer')).click();

        expect(playerTable.count()).toBe(3)

      })
    });

});

(Facultatif) intégrer dans grunt

Ajoutez l'exécution du script dans grunt sous la tâche e2etest.

Vous aurez besoin du plugin grunt-shell pour lancer le script bash.

https://github.com/sindresorhus/grunt-shell

Solution :

Installez grunt-shell

npm install grunt-shell  --save-dev 

Ouvrez le Gruntfile.js.

Dans la liste des tâches ajoutez la tâche

  grunt.registerTask('e2etest', [
    'shell:protractor'
  ]);

Dans la section config vous devez définir shell:protractor :

    // required npm install grunt-shell  --save-dev 
    shell: {
      protractor: {
          command: 'bash tools/run-protractor.bash'
      }
    }