Protractor 如何在webstorm中debug代码

zd6515843 发表于 2017-8-13 20:39:04

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 , step2click..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:05

你的结构听上去有点迷糊
我是分为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(' 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:13

大神们多多指点阿谢谢了

zd6515843 发表于 2017-8-16 08:36:34

谢谢支持~

zd6515843 发表于 2017-8-17 20:06:34

欢迎各路大神支招解惑~:)

zd6515843 发表于 2017-8-18 09:19:04

anyone can help me.:)

zd6515843 发表于 2017-8-27 07:53:59

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

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

hyj785 发表于 2017-8-31 16:49:09

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

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

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

页: [1]

51Testing软件测试论坛 's Archiver

Protractor 如何在webstorm中debug代码