Protractor Element IDs

Automatisiertes Testing

Protractor

  • ​Standard E2E Testing Tool von Angular
  • Idee: Webseite automatisch testen, als wäre man ein Nutzer

Test-UI

Beispiel 1: Clear Search Button

// Protractor code to select the 'search_clear' button // by xpath let path = "//lib-search/mat-form-field/div/div[1]/div[2]/button"; let elem = element(by.xpath(path)); elem.click();// Search component Angular Template <mat-form-field> <input matInput /> <button mat-button > <kf-icon name="ic_clear_24"></kf-icon> </button> <ng-template #magnifier> <button disableRipple mat-icon-button matSuffix> <kf-icon name="ic_search_24"></kf-icon> </button> </ng-template> </mat-form-field>// Protractor code to select the 'search_clear' button // by css selector let selector = "[data-protractor-id='search_clear_provider']"; let elem = element(by.css(selector )); elem.click();// Search component Angular Template <mat-form-field> <input matInput /> <button mat-button data-protractor-id="search_clear_provider" > <kf-icon name="ic_clear_24"></kf-icon> </button> <ng-template #magnifier> <button disableRipple mat-icon-button matSuffix> <kf-icon name="ic_search_24"></kf-icon> </button> </ng-template> </mat-form-field>

Beispiel 2: Listen-Elemente

List Element Datum via XPath

this.verify_tpp_datum = function (g, l, value) { const row = l + 1; let path = '//div[@][' + g ']' + '/div/div[' + row + ']' + '//*[@]//p[2]'; var elem = element(by.xpath(path)); expect(elem.getText()).toContain(value); };

List Element Datum via CSS Selektor

this.verify_tpp_datum = function (elementIndex , value) { let selector = "[data-protractor-id='pp_v_provider_li']" var elem = element.all(by.css(selector )); expect(elem.getText()).toContain(value); };

Konventionen

  • 'data-protractor-id' Attribut statt 'id' Attribut
  • IDs mit '_li' als Suffix können mit element.all() geholt werden
  • Alle IDs sind im Confluence in einer Liste erfasst
       (als Schnittstelle zwischen Entwicklern und Testern)

Confluence Liste