javascript - 如何从 标签中提取文本？

Question

我正在使用 Protractor 和 Jasmine 对我的应用程序进行端到端测试。我必须验证应用程序抛出的消息是否正确。消息框仅显示 10 秒。我尝试使用 ID，但没有用。错误消息:“使用定位器未找到元素:By(css selector, *[id="Message1"])”以下是该元素的 HTML:

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

上面的元素在模态对话框中。模态对话框的完整 HTML 如下所述:

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

下面是我试过的 Protractor 代码。

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');

     });

    });

请建议如何从“强”标签中捕获文本？提前致谢。

Answer 1

我们遇到了类似的问题，以下是我们的处理方式:

• 使用browser.wait()等待消息可见
• 关闭 Protractor-to-Angular 同步，同时关闭它(与暂时可用的消息相关)

实现

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");

然后，在 afterEach() 中再次打开同步:

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