How to debug component/typescript code when running Protractor

Question

Most of the questions I've read so far only deal with trying to debug the unit tests / e2e tests when running Protractor / vscode (or rather how to make the breakpoints work in vscode)

In my case, I'm able to place breakpoints in my e2e tests and vscode have no issues with them, but the problem, once I'm inside the it() function, I have no clue how to access/inspect my components

I know e2e tests are not about components, but in this case, I was able to find a nasty bug that only e2e tests were able to catch, and I really need to inspect component variables to see what's going on

    it('should do something with ProductComponent', () =>
{
    // Code...
        
    // Once I'm here, how can I inspect ProductComponent anyway??
}

where, for example, ProductComponent looks like this:

@Component({
    selector   : 'app-product',
    templateUrl: './product.component.html',
    styleUrls  : ['./product.component.css']
})
export class ProductComponent
{
    productId: number;
    productSKU: number;
    
    // ...
}

Maciej Treder · Accepted Answer · 2017-07-17 11:53:11Z

1

Try browser.pause() or browser.explore() methods. I think that explore fits more into your needs.

http://www.protractortest.org/#/api?view=ProtractorBrowser.prototype.pause http://www.protractortest.org/#/api?view=ProtractorBrowser.prototype.explore

import {browser} from 'protractor';

describe('suite', () => {
    it('test',() => {
        browser.pause();
        browser.explore();
    });
});

edited Jul 17, 2017 at 11:53

answered Jul 17, 2017 at 11:27

Maciej Treder

12.4k6 gold badges58 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

TheDude Over a year ago

Thanks Maciej, but I'm afraid I don't see how this would help me inspect the component(s)

TheDude Over a year ago

I meant inspect component variable values, so as per the example I mentioned in my question, how to get the value of variable productId (which belongs to ProductComponent)

Maciej Treder Over a year ago

Any update on that? Is browser.explore() that what you were looking for?

TheDude Over a year ago

I'm still learning about the .explore(), I mean OK - it allows to pause and use list() to query the DOM, but so far I couldn't find a way to use it to inspect the components (some of my components have variables that are NOT rendered in the DOM, so DOM query won't help much in my case)

Maciej Treder Over a year ago

Great. I am happy, that my answer was at least a bit helpful :)

|

Collectives™ on Stack Overflow

How to debug component/typescript code when running Protractor

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related