How to extract text from <Strong> tag?

Question

I am using Protractor with Jasmine for e2e testing my application. I have to validate whether the message thrown by the application is correct or not. The message box is visible only for 10 sec. I tried using the ID but it didn't work. Error Message: "No element found using locator: By(css selector, *[id="Message1"])" Below is the HTML for the element:

   <div class="alert alert-warning alert-dismissible ng-scope" role="alert" ng-if="message.error" id="Message">
<strong id="Message1" class="ng-binding">Please Enter Valid License Key</strong>

The above element is in a modal dialog. Full HTML for Modal Dialog is mentioned below:

     <div class="modal-content" uib-modal-transclude="">
    <div class="modal-header ng-scope">
        <h4 class="modal-title ng-binding" id="modal-title">Register New License Key</h4>
    </div>
    <div class="modal-body ng-scope" id="modal-body">
        <form name="RegisterNewLicenseKeyForm" ng-submit="Register(objDs)" novalidate="" class="ng-pristine ng-invalid ng-invalid-required">
            <div class="form-group">
                <label for="LicenseKey" class="ng-binding">License Key</label>
                <textarea class="form-control ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" rows="3" id="LicenseKey" name="LICENSE_KEY" ng-model="objDs.LICENSE_KEY" placeholder="License Key" ng-required="true" my-maxlength="500" tab-index="" ng-trim="false" required="required" style=""></textarea>
            </div>
            <!-- ngIf: !RegisterNewLicenseKeyForm.$valid --><div ng-if="!RegisterNewLicenseKeyForm.$valid" class="ng-scope">
                <form-response-message><!-- ngIf: message.error --><div class="alert alert-warning alert-dismissible ng-scope" role="alert" ng-if="message.error" id="Message">
    <strong id="Message1" class="ng-binding">Please Enter Valid License Key</strong>
</div><!-- end ngIf: message.error -->
</form-response-message>
            </div><!-- end ngIf: !RegisterNewLicenseKeyForm.$valid -->
            <div class="clearfix modal-footer1">
                <div class="pull-left">
                    <button class="btn btn-primary ng-binding" id="Validate" type="submit" tabindex="2" ng-disabled="RegisterNewLicenseKeyForm.$submitted || !RegisterNewLicenseKeyForm.$valid" disabled="disabled">Validate</button>
                </div>
                <div class="pull-right rightspace">
                   <cancel-icon title="Cancel" type="button" name="Cancel" tabindex="3" ng-click="Clear()" class="ng-isolate-scope"><div ng-class="{ &quot;has-focus&quot;: formName[name].hasFocus,
            &quot;has-success&quot;: formName[name].$valid,
            &quot;has-error&quot;: formName[name].$error.required &amp;&amp; formName.$submitted,
            &quot;has-error-pattern&quot;: formName[name].$error.pattern &amp;&amp; formName.$submitted,
            &quot;is-empty&quot;: !ngModel }" class="is-empty">
    <button class="btn btn-link btnPad t2  ng-pristine ng-untouched ng-empty ng-valid ng-valid-required" id="btnCancel" type="button" title="" ng-model="ngModel" ng-required="" ng-readonly="" autocomplete="off" spellcheck="false" tabindex="">
        <i class="fa fa-ban fa-2x " aria-hidden="true"></i>
    </button>
</div>

</cancel-icon>
                   <close-icon title="Close" type="button" name="Close" tabindex="4" ng-click="Close()" class="ng-isolate-scope"><div ng-class="{ &quot;has-focus&quot;: formName[name].hasFocus,
            &quot;has-success&quot;: formName[name].$valid,
            &quot;has-error&quot;: formName[name].$error.required &amp;&amp; formName.$submitted,
            &quot;has-error-pattern&quot;: formName[name].$error.pattern &amp;&amp; formName.$submitted,
            &quot;is-empty&quot;: !ngModel }" class="is-empty">
    <button class="btn btn-link btnPad t2 ng-pristine ng-untouched ng-empty ng-valid ng-valid-required" id="btnClose" type="button" title="" ng-model="ngModel" ng-required="" ng-readonly="" autocomplete="off" spellcheck="false" tabindex="">
        <i class="fa fa-times-circle fa-2x" aria-hidden="true"></i>
    </button>
</div>

</close-icon></div>
            </div>
            <div class="clearfix"></div>
        </form>
    </div>
</div>

Below is the Protractor code that i tried.

describe('Click on login button', function() {

      it('should navigate to Home page', function()  {

        browser.get(URL);
        browser.sleep(1000);
        browser.manage().window().maximize();

    //Register New License Key      
        element(by.id('RegisterNewLicenseKey')).click();
        browser.sleep(1000);
        element(by.id('LicenseKey')).sendKeys('LISC010102'); 
        browser.sleep(1000);
        element(by.id('Validate')).click(); 
        browser.sleep(1000);
        var message=$('#Message1').getText();
        expect(message).toBe('Please Enter Valid License Key');
        element(by.id('Close')).click(); 
    //User Login  
        element(by.id('text_User_name')).sendKeys('admin');
        element(by.id('text_userPassword')).sendKeys('welcome');
        browser.sleep(1000);
        element(by.id('btnLogin')).click();
        var title = browser.getTitle();
        browser.sleep(1000);
        expect(title).toBe('Home');

     });

    });

Please suggest how to capture the text from 'Strong' Tag? Thanks in Advance.

Answer 1

We had a similar problem and here is how we've approached it:

• use browser.wait() to wait for the message to be visible
• turn the Protractor-to-Angular sync off, while you are doing it (related to the message being temporarily available)

The implementation

browser.ignoreSynchronization = true;

var message = element(by.id("Message1"));
var EC = protractor.ExpectedConditions;

browser.wait(EC.visibilityOf(message), 5000);
expect(message.getText()).toEqual("Please Enter Valid License Key");

Then, turn the sync on again in afterEach() :

afterEach(function() { 
    browser.ignoreSynchronization = false;
});   

Answer 2

如果你有 jquery 你可以使用$('#Message1').text()否则你可以使用document.getElementById('Message1').innerText或document.querySelector('#Message1').innerText

Answer 3

尝试使用 xpath：

element(by.xpath(.//strong[@id='Message1']).getText();