51Testing软件测试论坛

标题: Protractor 如何在webstorm中debug代码 [打印本页]

作者: zd6515843 时间: 2017-8-13 20:39
标题: Protractor 如何在webstorm中debug代码
js菜鸟一枚，现请教各路大神，如何在webstorm中debug代码，代码结构如下。
平时运行代码 1. webdriver-manager start --> 2. protractor runner.js
代码会按照代码结构中 1,2,3,4的顺序相互调用完成每个测试step，现在我想debug step 2 里的某个方法，我该怎么做。

Project
config.js
features
      test.js （2.定义了具体的测试step:  step1 login , step2  click  ..  button,  ......  step n Verify ......）
pageObjects
      page1.js（4.step 具体实现）
      page2.js
steps
      page1Step.js （3.声明 steps）
      page2Step.js
runner.js （1. 里面配置引用了 test.js）

作者: hyj785 时间: 2017-8-13 20:39
你的结构听上去有点迷糊
我是分为3个文件
page 放页面 spec放测试流程。
step里面放具体步骤。要调用步骤
只用改 spec就完了

step

'use strict';

const step = function () {

const page = require('./login.page.js');
const EC = protractor.ExpectedConditions;

this.go = () => {
      browser.get('/');
      browser.wait(EC.visibilityOf(page.loginButton), 5000, '登陆按钮没有显示')
      .then((result) => {
         expect(result).toBe(true) })
}

this.login = () => {
      let user = constants.USERS.test;
      base.login(user);
};

this.logout = () => {
      browser.get('/');
      base.clickRead(page.menu,'个人设置菜单不可见');
      base.clickRead(page.logoutButton,'登出按钮不可见');
      browser.wait(EC.visibilityOf(page.loginButton), 5000, '登录按钮不可见')
      .then((result) => { expect(result).toBe(true) })
}
}
module.exports = new step();

page
'use strict';

module.exports = {
loginPage: element.all(by.css('[ui-view=content] p')),
nameInput: element(by.id('username')),
passwordInput: element(by.id('password')),
loginButton: element(by.id('login-btn01')),
menu: element(by.id('account-menu')),
logoutButton: element(by.id('logout')),
accountname: element(by.css('span.hidden-sm.ng-binding'))
}

spec
'use strict';

const step = require('./login.step.js');

describe('login page', function () {

it('should navigate to the login page', function () {
      step.go();
});

it('should navigate to the main page', function () {
      step.login();
});

it('should return to the login page', function () {
      step.logout();
});

/* */
});

作者: zd6515843 时间: 2017-8-14 08:47
大神们多多指点阿谢谢了

作者: zd6515843 时间: 2017-8-16 08:36
谢谢支持~

作者: zd6515843 时间: 2017-8-17 20:06
欢迎各路大神支招解惑~

作者: zd6515843 时间: 2017-8-18 09:19
anyone can help me.

作者: zd6515843 时间: 2017-8-27 07:53

hyj785 发表于 2017-8-24 14:55
你的结构听上去有点迷糊
我是分为3个文件
page 放页面 spec放测试流程。

感谢你的回复，咱们的代码结构不太一样哦，按照你这种方式的话怎么进行的debug呢，能否举类详细说明一下，比如我想只debug login 方法，我该怎么做需要配置什么地方。

作者: hyj785 时间: 2017-8-31 16:49
   this.login = (user) => {
      let page = require('./login/login.page.js');
      let stant = this;
      browser.manage().deleteAllCookies();
      browser.get('/', 5000)
      browser.wait(EC.visibilityOf(page.nameInput), 50000, '名称输入文本框没有显示');
      page.nameInput.clear().sendKeys(user.name);
      page.passwordInput.clear().sendKeys(user.word);
      browser.wait(EC.textToBePresentInElementValue(page.nameInput, user.name), 5000);
      browser.wait(EC.textToBePresentInElementValue(page.passwordInput, user.word), 5000);
      page.loginButton.click();
      browser.wait(EC.visibilityOf(page.accountname), 5000, '账号名称不可见');
      page.accountname.getText().then((text) => {
         console.log(text);
         expect(text).toMatch(user.name);
      });
}
}

一般情况下都是用的console.log();
我用的 Visual Studio Code，debug工具是自带的  用法跟其他程序一样，加断点就可以了

作者: zd6515843 时间: 2017-9-2 19:56

hyj785 发表于 2017-8-31 16:49
this.login = (user) => {
let page = require('./login/login.page.js');
let sta ...

console.log 这种方式也还好，visual studio code里打断点就可以实现走到断点处代码停下来么，我在
webstorm里可以打断点但是不能停下来的。

欢迎光临 51Testing软件测试论坛 (http://bbs.51testing.com/)