1

我们有这个 Ionic3 离子菜单（隐藏的左侧滑出菜单），我们必须向右滑动它才能显示。在 Chrome 上，只需单击鼠标即可轻松完成。但是不能用量角器来做。

这是离子离子菜单：

<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>

这是Chrome 的 F12 选项卡上的 ion-menu 元素的打印屏幕。

到目前为止我已经尝试过： 

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

另外，我在这里通过@Boland 尝试了此解决方案，滑动并单击按钮量角器，没有错误但没有任何反应。奇怪的是，如果我再次尝试在元素上单击（），我不会再收到“失败：元素不可见”，甚至 wait() 说元素是可点击的（但菜单仍然不会滑动打开）。

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

附加信息：
这是我的 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();
    })

});

这是我的 conf.js 文件：

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());
  },
};

其他信息：

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

我错过了什么吗？我做错了吗？
我很感激任何帮助。有什么线索吗？

4

0 回答 0