Search code examples
typescriptxpathcss-selectorsprotractorangularjs-e2e

protractor e2e typescript for mat-selection-list checkboxes - select all

How do I check all checkboxes in this page using protractor ?

I tried to access the elements this way but doesn't seem to be working.

select = element(by.cssContainingText('mat-card-title', 'Classifications'))
    .all(by.css('mat-pseudo-checkbox'));

page html

Solution

  • Your approach does not work because mat-card-title does not have any child elements. When chaining element() calls, it always only searches for child elements.

    For selecting the correct elements, we have to take the parent mat-card and filter it by by.cssContainingText().

    After filtering we have to locate the mat-pseudo-checkbox elements and send a click to these underlying elements.

    That can be achieved as follows:

    // select correct element group
let wrapper = element.all(by.tagName('mat-card'))
  .filter(el => el.element(by.tagName('mat-card-title'))
  .getText()
  .then(text => {
    console.log('looking if\'', text, '\'contains Classifications');
    return text.indexOf('Classifications') > -1;
  }));

   wrapper.all(by.css('mat-card-content mat-selection-list mat-list-option .mat-list-item-content .mat-list-text'))
  .each(async el => await el.click());

    Ressources

    Protractor CheatSheet:

    General Style guide for protractor => https://github.com/CarmenPopoviciu/protractor-styleguide

    Cheat-sheet => https://gist.github.com/javierarques/0c4c817d6c77b0877fda

    As your test suite grows, you should consider using the Page Object Model Pattern for your tests. We use it for our tests and it's a great pattern for separating test logic. => https://www.thoughtworks.com/insights/blog/using-page-objects-overcome-protractors-shortcomings