CODEWITHSUNDEEP
typescriptmocha.jschaiangularjs-e2egulp-protractor
vw511
vw511

Reputation: 171

How to locate this button from nested html using protractor and chai

Hi I'm writing some e2e tests using protractor, chai and mocha. Language is Typescript. I'm very new to these things. I've been stuck for hours on locating an element. How do I locate button "Edit ValueChart" from a bunch of nested HTML as the following:

<div id="ValueChartView">
<input type="color" id="primitiveObjective-color-picker">
<div class="valuechart-toolbar">
    <form class="form-inline col-xs-12">
        <div class="form-group valuechart-toolbar-group pull-left">
            <a class="btn btn-default" *ngIf="enableManagement()" [routerLink]="['/createValueChart/editChart/BasicInfo']">
            Edit ValueChart
            </a>
        </div>

I've tried things like

var editValueChartBtn = p.browser.element(p.by.css('.form-group.valuechart-toolbar-group.pull-left .btn.btn-default'));

// The button should not appear on the page
expect(editValueChartBtn.isDisplayed()).to.eventually.be.false;

or 

var editValueChartBtn = p.browser.element(p.by.cssContainingText('#ValueChartView','Edit ValueChart')); 

// The button should not appear on the page
expect(editValueChartBtn.isDisplayed()).to.eventually.be.false;

and a bunch of others, but none works. Always get error "No Such Element Found". Occasionally I got error "Assertion Error: Expected true to be false", in which case I suspect I didn't find the right element anyways. Could someone help me locate the element? Also, I found the above source codes in a template.html file, which is a bit different from the codes I see when inspecting on the webpage. Why is that? Thank you so much!

Upvotes: 0

Views: 169

Answers (0)

Related Questions