E2E Tests with Protractor (Angular)

[Raphael_Jutras]

Hello,

We are unable to test the Time Picker component with Protractor, in fact, we are unable to access the mobiscroll ‘modal’ itself and acknowledge that it is ‘displayed’ (with protractor)…

Here is the code we use:

public getTimesheetScrollModal() { 
return this.getElementByCss('.mbsc-mobiscroll'); 
}

Protractor always says that it is undefined… (the selector is not working)

Upon verification and research, we noticed that mobiscroll “popup/modal” code, in the DOM, is generated outside the angular app <app-root> and some stackoverflow post state that Protractor cannot access elements outside Angular app…

https://stackoverflow.com/questions/47428209/how-can-i-target-elements-outside-the-angular-app-with-protractor

Is there a quick fix to enable Protractor E2E tests?

Has anyone executed E2E tests successfully?

Thank you.

[Zsombor]

Hi there,

Thanks for reaching out!
I’m not really sure what would be the proper way to do this in Protractor, but the following works for me:

it('should show picker', () => {
  const fixture = TestBed.createComponent(AppComponent);
  fixture.detectChanges();
  const compiled = fixture.debugElement.nativeElement;
  const dateInput = compiled.querySelector('mbsc-date input');
  dateInput.dispatchEvent(new Event('click'));
  const modalElement = document.querySelector('.mbsc-fr');
  expect(modalElement).toBeTruthy();
});

Please let me know if this helps!

[Raphael_Jutras]

Your example is Jasmine code, not protractor…
Protractor cannot use any query selector to manipulate the elements in the modal because the modal itself cannot be reached, it “looks” like this is due to the fact that the Mobiscroll modal is generated outside the Angular app app root.

So your code would not work with Protractor.

Here is a screenshot where mobiscroll modal is generated:

I don’t understand why other user never had this problem before, protractor is popular among Angular developers…
We really need a fix to be able to test with Protractor.

I will be waiting for your answers.

Thank you for your support

[isti]

Sorry about the mixup. I tried this with Protractor, but the modal being outside of app-root does not seem to be an issue for me. Here’s the code I used:

app.po.ts:

  openTimesheetScroll() {
    return element(by.css('mbsc-time input')).click();
  }

  getTimesheetScrollModal() {
    return element(by.css('.mbsc-fr')).isDisplayed();
  }

app.e2e-spec.ts

    it('should open timepicker', () => {
      page.openTimesheetScroll().then(() => {
        page.getTimesheetScrollModal().then(displayed => {
          expect(displayed).toBe(true);
        });
      });
    });

Please let me know if this works for you!

[Raphael_Jutras]

Hi there,

Thank you very much for your reply. I was able to successfully execute the code and see if the mobiscroll is displayed using Ionic by setting the browser.waitForAngularEnabled(false);. It seems like protractor cannot read the element once outside the app-root of the angular component. However, is it possible to set the value or tick the value of mobiscroll timepicker using protractor? We are using the time picker