E2e saucelabs

demo/e2e/data-provider/data-provider.po.ts

@@ -1,4 +1,5 @@
-import { $, ElementFinder } from 'protractor';
+import { $ } from 'protractor';
+import { ElementFinder } from 'protractor/built/index';
 
 const getTabHeaderAccordionPage = (tabNumber:number) => {
   return $('accordion-group:nth-child(' + tabNumber + ') .panel-heading');
@@ -23,4 +24,32 @@ export class DataProvider {
     '5stTabHeaderText': {element: (): ElementFinder => getTabHeaderAccordionPage(5), actualResult: 'I can have markup, too!'},
     '5stTabContentText': {element: (): ElementFinder => getTabContentAccordionPage(5), actualResult: 'This is just some content to illustrate fancy headings.'}
   };
+
+  public static alertTableContains:any = {
+    'Alert Danger text': {element: (): ElementFinder => $('[ng-reflect-type="danger"]>div'), actualResult: 'Oh snap! Change a few things up and try submitting again.'},
+    'Alert Success text': {element: (): ElementFinder => $('[ng-reflect-type="success"]>div:not(span):not(.close)'), actualResult: 'Well done! You successfully read this important alert message.'},
+    'Alert Dismissible text': {element: (): ElementFinder => $('[dismissontimeout="3000"]'), actualResult: 'This alert will dismiss in 3s'},
+    'Alert Another text': {element: (): ElementFinder => $('[ng-reflect-type="warning"]:nth-child(2n)'), actualResult: 'Another alert!'}
+  };
+  public static modalsTableContains:any = {
+    'Modal Large button text': {element: (): ElementFinder => $('.btn:nth-child(1)'), actualResult: 'Large modal'},
+    'Modal Small button text': {element: (): ElementFinder => $('.btn:nth-child(3)'), actualResult: 'Small modal'},
+    'Modal Child button text': {element: (): ElementFinder => $('.btn:nth-child(5)'), actualResult: 'Open child modal'},
+    'Modal Static button text': {element: (): ElementFinder => $('.btn:nth-child(7)'), actualResult: 'Static modal'}
+  };
+  public static buttonsTableContains:any = {
+    'Buttons Example header text': {element: (): ElementFinder => $('#example>h3'), actualResult: 'Example'},
+    'Buttons Single Toggle header text': {element: (): ElementFinder => $('buttons-demo>h4:nth-child(1)'), actualResult: 'Single toggle'},
+    'Buttons Single Toggle button text': {element: (): ElementFinder => $('buttons-demo>.btn'), actualResult: 'Single Toggle'},
+    'Buttons Checkbox Left button text': {element: (): ElementFinder => $('.btn-group [btncheckbox]:nth-child(1)'), actualResult: 'Left'},
+    'Buttons Radio Header text': {element: (): ElementFinder => $('buttons-demo :nth-child(8)'), actualResult: 'Radio & Uncheckable Radio'},
+    'Buttons Checkbox Middle button text': {element: (): ElementFinder => $('.btn-group [btncheckbox]:nth-child(2)'), actualResult: 'Middle'},
+    'Buttons Checkbox Right button text': {element: (): ElementFinder => $('.btn-group [btncheckbox]:nth-child(3)'), actualResult: 'Right'},
+    'Buttons Radio Left button text': {element: (): ElementFinder => $('.btn-group:nth-child(2n) :nth-child(1)'), actualResult: 'Left'},
+    'Buttons Radio Middle button text': {element: (): ElementFinder => $('.btn-group:nth-child(2n) :nth-child(2)'), actualResult: 'Middle'},
+    'Buttons Radio Right button text': {element: (): ElementFinder => $('.btn-group:nth-child(2n) :nth-child(3)'), actualResult: 'Right'},
+    'Buttons Uncheckable Left button text': {element: (): ElementFinder => $('.btn-group [uncheckable]:nth-child(1)'), actualResult: 'Left'},
+    'Buttons Uncheckable Middle button text': {element: (): ElementFinder => $('.btn-group [uncheckable]:nth-child(2)'), actualResult: 'Middle'},
+    'Buttons Uncheckable Right button text': {element: (): ElementFinder => $('.btn-group [uncheckable]:nth-child(3)'), actualResult: 'Right'}
+  };
 }

demo/e2e/tests/accordion-demo.e2e-spec.ts

@@ -8,8 +8,8 @@ const buttonAddItem = $('.panel-body .btn');
 const checkboxOnlyOne = $('.checkbox .ng-valid');
 const getItemsCount = $$('accordion-group:nth-child(4) .panel-body > div');
 const buttonArrow = $('.pull-right');
+const buttonGroup = $$('.panel-group accordion-group');
 let using = require('jasmine-data-provider');
-
 const getTabHeader = (tabNumber:number) => {
   return $('accordion-group:nth-child(' + tabNumber + ') .panel-heading');
 };
@@ -19,62 +19,10 @@ const getTabContent = (tabNumber:number) => {
 
 describe('Check the Accordion page in bootstrap 3', () => {
   beforeAll(() => {
-    browser.get('#/accordion');
-    leftPanelTests.checkLeftPanelMini();
-    leftPanelTests.checkLeftPanelMaxi();
-  });
-  it('Close/open first tab by click', () => {
-    getTabHeader(1).click();
-    expect(getTabContent(1).isDisplayed()).toBe(false);
-    getTabHeader(1).click();
-    expect(getTabContent(1).isDisplayed()).toBe(true);
+    browser.ignoreSynchronization = true;
+    browser.get(`${browser.baseUrl}#/accordion`);
   });
-  it('Open/close last tab with button Toggle Last Panel', () => {
-    buttonToggleLastPanel.click();
-    expect(getTabContent(5).isDisplayed()).toBe(true);
-    expect(buttonArrow.getAttribute('class')).toContain('glyphicon-chevron-down');
-    buttonToggleLastPanel.click();
-    expect(getTabContent(5).isDisplayed()).toBe(false);
-    expect(buttonArrow.getAttribute('class')).toContain('glyphicon-chevron-right');
-  });
-  it('Button Enable/Disable first panel is ON', () => {
-    buttonEnableDisablePanel.click();
-    getTabHeader(1).click();
-    expect(getTabContent(1).isDisplayed()).toBe(false);
-  });
-  it('Button Enable/Disable first panel is OFF', () => {
-    buttonEnableDisablePanel.click();
-    getTabHeader(1).click();
-    expect(getTabHeader(1).isDisplayed()).toBe(true);
-  });
-  it('Add items in 4th tab', () => {
-    getTabHeader(4).click();
-    expect(getItemsCount.count()).toBe(3);
-    buttonAddItem.click();
-    buttonAddItem.click();
-    expect(getItemsCount.count()).toBe(5);
-  });
-  it('Open all tabs together', () => {
-      checkboxOnlyOne.click();
-      getTabHeader(1).click();
-      getTabHeader(2).click();
-      getTabHeader(3).click();
-      getTabHeader(5).click();
-      expect(getTabHeader(1).isDisplayed()).toBe(true);
-      expect(getTabHeader(2).isDisplayed()).toBe(true);
-      expect(getTabHeader(3).isDisplayed()).toBe(true);
-      expect(getTabHeader(4).isDisplayed()).toBe(true);
-      expect(getTabHeader(5).isDisplayed()).toBe(true);
-  });
-  using (DataProvider.accordionTableContent, (data:any, description:string) => {
-    it ('Check table texts: ' + description, () => {
-      expect(data.element().getText()).toBe(data.actualResult);
-    });
-  });
-});
-describe('Check the Accordion page in bootstrap 4', () => {
-  beforeAll(() => {
-    browser.get('index-bs4.html#/accordion');
+  afterAll(() => {
     leftPanelTests.checkLeftPanelMini();
     leftPanelTests.checkLeftPanelMaxi();
   });
@@ -103,23 +51,18 @@ describe('Check the Accordion page in bootstrap 4', () => {
     expect(getTabHeader(1).isDisplayed()).toBe(true);
   });
   it('Add items in 4th tab', () => {
+    browser.sleep(1000);
     getTabHeader(4).click();
     expect(getItemsCount.count()).toBe(3);
     buttonAddItem.click();
     buttonAddItem.click();
     expect(getItemsCount.count()).toBe(5);
   });
-  it('Open all tabs together', () => {
+  it('Open all tabs together', (): void => {
     checkboxOnlyOne.click();
-    getTabHeader(1).click();
-    getTabHeader(2).click();
-    getTabHeader(3).click();
-    getTabHeader(5).click();
-    expect(getTabHeader(1).isDisplayed()).toBe(true);
-    expect(getTabHeader(2).isDisplayed()).toBe(true);
-    expect(getTabHeader(3).isDisplayed()).toBe(true);
-    expect(getTabHeader(4).isDisplayed()).toBe(true);
-    expect(getTabHeader(5).isDisplayed()).toBe(true);
+    buttonGroup.each(function (element: any): void {
+      element.click();
+    });
   });
   using (DataProvider.accordionTableContent, (data:any, description:string) => {
     it ('Check table texts: ' + description, () => {

demo/e2e/tests/alert-demo.e2e-spec.ts

@@ -1,30 +1,24 @@
 import { $, $$, browser } from 'protractor';
+import { DataProvider } from '../data-provider/data-provider.po';
 import { leftPanelTests } from './leftPanelTests.po';
 
+let using = require('jasmine-data-provider');
 const buttonAddAlert = $('alert-demo .btn');
-const alertWarning = $('.alert.alert-warning');
+const alertWarning = $('[ng-reflect-ng-class="alert-warning"]');
 const getAlertCount = $$('alert > div');
-const getCloseButton = (tabNumber:any) => {
+const getCloseButton = (tabNumber:number) => {
   return 'alert-demo alert:nth-child(' + tabNumber + ') .close';
 };
 
 describe('Alerts page test on bootstrap 3', () => {
   beforeAll(() => {
-    browser.get('#/alerts');
+    browser.get(`${browser.baseUrl}#/alerts`);
     browser.ignoreSynchronization = true;
+  });
+  afterAll(() => {
     leftPanelTests.checkLeftPanelMini();
     leftPanelTests.checkLeftPanelMaxi();
   });
-  beforeEach(() => {
-    browser.refresh();
-  });
-  it('Warning alert is displayed', () => {
-    expect(alertWarning.isDisplayed()).toBe(true);
-  });
-  it('Warning alert is disappear', () => {
-    browser.sleep(5000);
-    expect(alertWarning.isPresent()).toBe(false);
-  });
   it('Default warnings count', () => {
     expect(getAlertCount.count()).toBe(3);
   });
@@ -33,50 +27,24 @@ describe('Alerts page test on bootstrap 3', () => {
     buttonAddAlert.click();
     expect(getAlertCount.count()).toBe(5);
   });
-  it('User can delete danger and success alerts', () => {
-    $(getCloseButton(2)).click();
-    $(getCloseButton(1)).click();
-    expect(getAlertCount.count()).toBe(1);
-  });
-  it('User can delete added alerts', () => {
-    buttonAddAlert.click();
-    $(getCloseButton(3)).click();
-    expect(getAlertCount.count()).toBe(3);
-  });
-});
-describe('Alerts page test on bootstrap 4', () => {
-  beforeAll(() => {
-    browser.get('index-bs4.html#/alerts');
-    browser.ignoreSynchronization = true;
-    leftPanelTests.checkLeftPanelMini();
-    leftPanelTests.checkLeftPanelMaxi();
-  });
-  beforeEach(() => {
-    browser.refresh();
-  });
-  it('Warning alert is displayed', () => {
-    expect(alertWarning.isDisplayed()).toBe(true);
+  using (DataProvider.alertTableContains, (data:any, description:string) => {
+    it ('Check tab texts: ' + description, () => {
+      expect(data.element().getText()).toContain(data.actualResult);
+    });
   });
   it('Warning alert is disappear', () => {
-    browser.sleep(5000);
+    browser.sleep(3000);
     expect(alertWarning.isPresent()).toBe(false);
   });
-  it('Default warnings count', () => {
-    expect(getAlertCount.count()).toBe(3);
-  });
-  it('Adding warnings', () => {
-    buttonAddAlert.click();
-    buttonAddAlert.click();
-    expect(getAlertCount.count()).toBe(5);
-  });
   it('User can delete danger and success alerts', () => {
-    $(getCloseButton(1)).click();
+    $(getCloseButton(3)).click();
+    $(getCloseButton(2)).click();
     $(getCloseButton(1)).click();
     expect(getAlertCount.count()).toBe(1);
   });
   it('User can delete added alerts', () => {
     buttonAddAlert.click();
-    $(getCloseButton(3)).click();
-    expect(getAlertCount.count()).toBe(3);
+    $(getCloseButton(1)).click();
+    expect(getAlertCount.count()).toBe(1);
   });
 });