Can't swipe open Ionic ion-menu with Protractor

Question

We have this Ionic3 ion-menu (hidden left side slide-out menu) which we have to swipe it open to the right so that it shows. On Chrome with the click of the mouse it can be easily done. But can't make it with Protractor.

This is the Ionic ion-menu:

<ion-menu id="menu1" role="navigation" side="left" type="overlay" class="menu-enabled show-menu" ng-reflect-content="[object Object]" ng-reflect-id="menu1">...</ion-menu>

This is a print-screen of the ion-menu element on F12 tab of Chrome.

What I have tried so far:

var element_sideMenu1 = element(by.id('menu1'));
element_sideMenu1.click();  // Failed: element not visible
browser.wait(EC.elementToBeClickable(element_sideMenu1), 10000);   // Failed: Wait timed out after 10012ms
browser.driver.touchActions().tap(element_sideMenu1).perform();   // runs OK, nothing happens
browser.actions().mouseMove(element_sideMenu1).mouseDown().mouseMove({x:450, y:0}).mouseUp().perform();   // runs OK, nothing happens

Also, I tried this solution by @Boland here swipe and click a button protractor, no error but nothing happens. Curiously after doing that if I try to click() on the element again I don't get the 'Failed: element not visible' any more and even wait() says element is clickable (but still menu does not swipe open).

element_sideMenu1.getLocation().then(location => {
        var startLocation = {
          x: location.x,
          y: location.y
        }

        var newLocation = {
          x: startLocation.x + 500,
          y: startLocation.y
        };        

browser.driver.touchActions().tapAndHold(startLocation).move(newLocation).perform();
})

browser.wait(EC.elementToBeClickable(element_sideMenu1), 10000);   //  now runs OK, but still nothing happens
element_sideMenu1.click();   //  now runs OK, but still nothing happens

Additional information:
This is my spec.ts (TypeScript):

import { browser, element, by, ElementFinder, protractor} from 'protractor';

var fs = require('fs');
var tc_Name = 'TC - ';
var output = './Output/';
var EC = protractor.ExpectedConditions;

// elements
var element_title = element(by.css('ion-title.title.title-md'));
var element_close = element(by.id('ion-diagnostic-close'));
var element_sideMenu1 = element(by.id('menu1'));
var element_sideMenu2 = element(by.id('menu2'));
var element_drop = element(by.css('div.scroll-content')); 


// Functions - Printscreen
function writeScreenShot(data, filename) {
  var stream = fs.createWriteStream(filename);

  stream.write(new Buffer(data, 'base64'));
  stream.end();
}

// SetUp
afterEach(function() {
  browser.takeScreenshot().then(function (png) {
    writeScreenShot(png, output + tc_Name+'.png');
  });
});


describe('App Home Screen', function() {
  browser.get('');
  browser.manage().window().maximize();


    it('should have a title "Medicos pesquisados"', function() {
      expect(browser.getTitle()).toContain('Medicos pesquisados');

      tc_Name = 'TC 01';
    });


    it('should close if error', function() {  
      element_close.isPresent().then( present => {
        if(present) {
          element_close.click();
        } else {
          console.log('error not present');
        }
      })

      tc_Name = 'TC 02';
    })


    it('should swipe open menu', function() {
      browser.debugger();
      // element_sideMenu1.click(); // Failed: element not visible
      // browser.wait(EC.elementToBeClickable(element_sideMenu1), 10000); // Failed: Wait timed out after 10012ms

      element_sideMenu1.getLocation().then(location => {
        var startLocation = {
          x: location.x,
          y: location.y
        }

        var newLocation = {
          x: startLocation.x + 500,
          y: startLocation.y
        };

        console.log(startLocation);
        console.log(newLocation);
        browser.driver.touchActions().tapAndHold(startLocation).move(newLocation).perform();
      })

    element_sideMenu1.click(); // runs OK now, nothing happens
    browser.wait(EC.elementToBeClickable(element_sideMenu1), 10000);  // runs OK now, nothing happens


    // It all runs OK, nothing happens
    browser.driver.touchActions().tap(element_sideMenu1).perform();
    browser.actions().mouseMove({x:0, y:500}).mouseDown().mouseMove({x:500, y:0}).mouseUp().perform();
    browser.actions().mouseMove(element_sideMenu1).mouseDown().mouseMove({x:500, y:0}).perform(); 
    browser.actions().mouseMove(element_sideMenu1).mouseDown().mouseMove(element_sideMenu2).perform(); 

    tc_Name = 'TC 03';
    browser.debugger();
    })

});

This is my conf.js file:

var SpecReporter = require('jasmine-spec-reporter').SpecReporter;

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './e2e/**/*.e2e-spec.ts'
  ],

  allScriptsTimeout: 15000,
  capabilities: {
    'browserName': 'chrome'
  },
  directConnect: true,
  baseUrl: 'http://localhost:8100/',
  framework: 'jasmine',
  stackTrace: true,

  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {},
    includeStackTrace: true,
  },

  useAllAngular2AppRoots: true,
  beforeLaunch: function() {
    require('ts-node').register({
      project: 'e2e'
    });
  },

  onPrepare: function() {
    browser.ignoreSynchronization = true
    browser.waitForAngularEnabled(false)
    jasmine.getEnv().addReporter(new SpecReporter());
  },
};

Other information:

Ionic3 - CLI 3.13.2
Protractor - 5.1.2
Chrome - 62.0.3202.62 / 64 bits
Visual Studio Code - code in TypeScript

Am I missing something? Have I done st wrong?
I appreciate any help. Any clue?

Can't swipe open Ionic ion-menu with Protractor

0 Answers0