Protractor 如何在webstorm中debug代码

zd6515843

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

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

大神们多多指点阿  谢谢了

zd6515843

谢谢支持~

zd6515843

欢迎各路大神支招解惑~

zd6515843

anyone can help me.  

zd6515843

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

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

hyj785

     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

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

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