Selenuim / Protractor无法在文本框中找到或单击

时间:2017-06-19 17:05:13

标签: selenium typescript automation protractor

我的网站代码如下,我想使用<input type="text" placeholder="Enter Workflow Name"下面代码段的第5行

代码

<div class="workflow-container ng-scope" data-ng-controller="sourceCode.Designer.uiComponents.conciergeScreen.templates.NewWorkflowController">
<div class="input">
    <div class="wrapper top" data-ng-class="{'fill': hosted === true}">
        <label class="welcome">What should your workflow be called?</label>
        <input type="text" placeholder="Enter Workflow Name" class="workflow-name-textbox ng-valid ng-not-empty ng-touched ng-dirty ng-valid-parse" data-ng-class="{'error': errors.error}" autofocus="" data-ng-focus="select($event)" data-ng-model="conciergetitle" data-ng-model-options="{ updateOn: 'default blur', debounce: { default: 300, blur: 300 } }" data-ng-change="inputchange(designeritems)" data-ng-keyup="$event.keyCode == 13 &amp;&amp; createnewstudioitem(designerItems[0], conciergetitle, $event)" style="">
        <div class="errogory">
            <div class="summary">
                <!-- ngIf: errors.error || errors.category -->
            </div>
            <div class="category" data-ng-click="categorypicker($event)">
                <label>Folder</label>
                <i class="icon icon-set-assetbrowser icon-size16 ic-categoryserver"></i>
                <a href="javascript:void(0)" data-ng-class="{ 'error': errors.category }" title="Workflow" class="ng-binding">Workflow</a>
            </div>
        </div>
        <div class="concierge-button-grid">
            <div class="concierge-button-container">
                <button id="createWorkflow" data-button-error="false" class="concierge-button button-command" data-ng-disabled="!newWorkflowReady" data-ng-class="{ 'error': errors.button, 'is-disabled error' : errors.button  }" data-ng-click="createnewstudioitem(designerItems[0], conciergetitle, $event)" disabled="disabled">
                    <!-- ngIf: !errors.button --><span data-ng-bind="getString('new_workflow_create_button')" data-ng-if="!errors.button" class="ng-binding ng-scope">Create</span><!-- end ngIf: !errors.button -->
                    <!-- ngIf: errors.button -->
                </button>
            </div>
            <div class="concierge-button-container">
                <button id="discardWorkflow" class="concierge-button concierge-button-discard button-command tertiary" data-ng-click="discard()">
                    <span data-ng-bind="getString('discard_workflow_button')" class="ng-binding">Discard</span>
                </button>
            </div>
        </div>
    </div>
    <!-- ngIf: showrecent -->
    <!-- ngIf: showrecent -->
</div>

我想点击文本框,以便我可以清除文本。我尝试过以下方法:

describe("New Screen", function () {
    it("Should give textbox a new name", function () {

        browser.sleep(10000);
        console.log('Enter new name');
        var editName = element.all(by.className('.workflow-name-textbox'));

        editName.first().click().then(function () {
            console.log('Clicked on Create');

        })
        browser.sleep(10000);
    })

我收到错误:索引超出范围。尝试访问索引处的元素:0 ...

如果我将上面的代码更改为:     var editName = element.all(by.css('。workflow-name-textbox'));

        editName.click().then(function () {
            console.log('Clicked on Create');

我没有收到错误,但我没有看到任何点击。

我知道我的量角器有效,因为我使用类似的代码导航到了这个页面。 有没有人建议我还能尝试什么。

2 个答案:

答案 0 :(得分:1)

我不得不放下两个iFrame:

    //Parent
    browser.switchTo().frame('Iframe1');
    //Child
    browser.switchTo().frame('Iframe2');
    //var NewTextBox = browser.findElement(by.css('.name-textbox')).clear();
    var NewTextBox = element.all(by.css('.name-textbox'));
    NewTextBox.clear().then(function () {

        console.log('Clear text');

答案 1 :(得分:0)

你是否尝试过这种方式而不是element.all。 element.all返回一个列表elemenet,元素只返回单个元素。

  • var NewTextBox = 元素(by.css('。workflow-name-textbox'));

  • var NewTextBox = 元素(by.xpath('// input [@ placeholder ='Enter Workflow Name']'));