Angular2 + e2eテスト - by.idを使用できません

Question

私はAngular2を初めて使用しましたが、テストする角度コンポーネントを開発していません。しかし、私はいくつかのUI（e2e）テストを書くはずですが、私は入力フィールドにテキストを入力することさえできません。

私の問題は、 element(by.id('username')).sendKeys('test') が機能していないということです。 （ボタン要素と同じなど）

私はそれがほんの少しだと確信していますが、私はそれが何であるかを知ることはできません。

• Proctractor：5.1.2
• クロムドライバ：58.0.3029.110
• OS：のWindows NT 6.1.7601 SP1 x86_64で

私は、次のような構成を持っています

仕様ファイル：

import { LoginPage } from './login.po'; 

describe('login tests', function() { 
    let page: LoginPage; 

    beforeEach(() => { 
    page = new LoginPage(); 
    }); 

    it('Demo',() => { 
    page.navigateTo(); 
    page.getUsernameInput().sendKeys('test'); 
    }); 
}); 

ページオブジェクトファイル：

import { browser, element, by } from 'protractor'; 

export class LoginPage { 
    navigateTo() { 
    return browser.get('/login'); 
    } 

    getParagraphText() { 
    return element(by.class('app-root h1')).getText(); 
    } 

    getUsernameInput() { 
    return element(by.id('username')); 
    } 
} 

HTMLテンプレート：

.... 
<div> 
    <input 
    id="username" 
    name="username" 
    ngModel 
    type="text" 
    placeholder="{{something}}" 
    autocomplete="off" 
    class="input-text" 
    required> 
</div> 
... 

Proctractorコンフィグ

var SpecReporter = require('jasmine-spec-reporter'); 

exports.config = { 
    allScriptsTimeout: 120000, 
    getPageTimeout: 120000, 
    specs: [ 
     './e2e/**/*.e2e-spec.ts' 
    ], 
    capabilities: { 
     'browserName': 'chrome' 
    }, 
    directConnect: true, 
    seleniumAddress: 'http://localhost:4444/wd/hub', 
    baseUrl: 'http://localhost:8001', 
    framework: 'jasmine', 
    jasmineNodeOpts: { 
     showColors: true, 
     defaultTimeoutInterval: 30000, 
     print: function() {} 
    }, 
    useAllAngular2AppRoots: true, 
    beforeLaunch: function() { 
     require('ts-node').register({ 
     project: 'e2e' 
     }); 
    }, 
    onPrepare: function() { 
     jasmine.getEnv().addReporter(new SpecReporter()); 
    } 
}; 

ご協力いただきまして誠にありがとうございます。

編集： いずれのソリューションも私の場合は機能しませんでした。私はelement(by.id('username'));の代わりにbrowser.driver.findElement(by.id('username'));を使用してしまいました。なぜこれが動作しないのかまだ分かりませんので、これは不満です。誰かが私にヒントや説明を与えることができれば感謝しています。

Answer 1

これは、あなたのgetUsernameInput()メソッドがこの場合にロケータを返さないためです。分度器のドキュメントに従って、

element（）関数はElementFinderオブジェクトを返します。 ElementFinderは、パラメータとして渡されたロケータを使用してDOM要素を見つける方法を知っていますが、まだ実際には行っていません。アクションメソッドが呼び出されるまでブラウザーにはアクセスしません。

getText()は約束を返すため、この変更されたコード

getUsernameInput() { 
     element(by.id('username')).sendKeys('text'); 
    } 
    } 

を試してみて、その後また

it('Demo',() => { 
     page.navigateTo(); 
     page.getUsernameInput(); 
    }); 
}); 

を使用することができ、私は、どのあなたgetText()テキストを返すかわかりません解決する必要があります。これは、hereと説明されています。

Answer 2

あなたの問題はタイミングだと思います。

it('Demo',() => { 
    // wait for page to change to /login 
    return page.navigateTo().then(() => { 
     // then look for user input and write 'test' 
     return page.getUsernameInput().sendKeys('test'); 
    });  
}); 

編集：

はelement(by.id('username'))以来browser.driver.findElement(by.id('username'))作品が同等であることを私には奇妙に聞こえる。あなたはどうなり

多くのブラウザのやりとりのためにヘルパークラスを使用します。おそらくショットに値するでしょう。私は要素を見つけ、キーストロークを送信するために使用

スニペット：

public static async getElement(locator: By | Function, waitMs?: number): Promise<ElementFinder | any> { 

    await BrowserHelper.waitForVisibilityOf(locator, waitMs | 1000); 

    return element(locator); 
} 

public static sendKeys(locator: By | Function, keys: string, clear?: boolean, waitMs?: number): Promise<void> { 
    return BrowserHelper.getElement(locator, waitMs).then((element: ElementFinder) => { 
     if (!clear) { 
      return element; 
     } 

     return element.clear().then(() => element); 
    }).then((element: ElementFinder) => { 
     return element.sendKeys(keys) 
    }); 
} 

public static async waitForVisibilityOf(locator: By | Function, waitMs?: number): Promise<any> { 
    await browser.wait(EC.presenceOf(element(locator)), waitMs || 5000).then(() => { 
     // visible 
    }, (error) => { 
     console.error('timeout at waitForVisibilityOf', locator, error); 
    }); 
}