Comment gérer les données de la table dans le Rapporteur

Dans le Rapporteur, comment gérer le contenu répété, de dire une table? Par exemple, le code suivant, qui donne le coup d'un tableau avec 3 colonnes: Index, Name et Delete-Button dans chaque ligne:

<table  class="table table-striped">
<tr ng-repeat="row in rows | filter : search"  ng-class="{'muted':isTemp($index)}">
  <td>{{$index+1}}</td>
  <td>{{row}}</td>
  <td>
    <button class="btn btn-danger btn-mini" ng-click="deleteRow(row)" ng-hide="isTemp($index)"><i class="icon-trash icon-white"></i></button>
  </td>
</tr>
</table>

Et dans mon test j'ai besoin de cliquer sur le bouton supprimer basé sur un nom donné. Quelle est la meilleure façon de trouver cette Rapporteur?

Je sais que je pourrais prendre le rows.colum({{row}}) texte, l'index, puis cliquez sur le button[index], mais je suis l'espoir d'une solution plus élégante.

Par exemple, dans Geb, vous pourriez passer un localisateur de ligne à un module, qui serait ensuite couper chaque ligne avec la colonne des indicateurs. Et cette solution a me reluque des Rapporteurs de la carte de méthode...

OriginalL'auteur Brine | 2014-09-16

  1. 7

    Vous pouvez utiliser la carte ou le filtre. L'api devrait ressembler à ceci:

      var name = 'some name';

  //This is like element.all(by.css(''))
  return $$('.table.table-stripe tr').filter(function(row) {
    //Get the second column's text.
    return row.$$('td').get(2).getText().then(function(rowName) {
      //Filter rows matching the name you are looking for.
      return rowName === name;
    });
  }).then(function(rows) {
    //This is an array. Find the button in the row and click on it.
    rows[0].$('button').click();
  });

    http://angular.github.io/protractor/#/api?view=ElementArrayFinder.prototype.filter

    Grâce Andres. J'ai presque eu, mais je suis aux prises avec certains de la syntaxe. Par exemple, je n'aime pas l'ajout de localisateur de code dans une méthode... mais cela semble être la façon dont le Rapporteur œuvres? Par exemple. au lieu de: return row.$$('td')... je voudrais utiliser: this.nameCol = $$('td'); return row.nameCol... Mais cela ne semble pas fonctionner.

    OriginalL'auteur Andres D

  2. 1

    Voici comment je fais quelque chose de semblable dans mon application en utilisant le Rapporteur à l'encontre d'un Kendo grille:

    J'ai une page de l'objet qui a les fonctions suivantes:

    //Query all table rows (tr) inside the kendo grid content container
this.getGrid = function () {

    return element.all(by.css('.k-grid-content tr'));
};


//Use the given rows element finder to query for the delete button within the context of the row
this.getDeleteButtonInRow = function (row) {

    return row.element(by.css(".btn.delete"));
};

    Puis-je utiliser ces fonctions dans mon test de la sorte:

    //Verify that a delete button appears in every row of the grid
var grid = pageObj.getGrid();

grid.each(function (row) {

    var deleteButton = downloadsPage.getDeleteButtonInRow(row);

    expect(deleteButton.isDisplayed()).toBe(true);
});

    OriginalL'auteur sma

  3. 1

    Voici ma solution, basée sur @Andres solution, que j'ai utilisé dans ma page objet:

        this.deleteFriend = function(nameString) {
        return this.rows.filter(function(row) {
            //find the row with the name we want...
            return row.$$('td').get(1).getText().then(function(name) {
                return name === nameString;
            });
        }).then(function(filteredRows) {
            filteredRows[0].$('i.icon-trash').click();
        });
    };
    Désolé, j'ai essayé de mettre cela dans un commentaire, mais ne pouvais pas le faire pour formater correctement...

    OriginalL'auteur Brine