3

ユーザーがflow.jsを使用してファイルをアップロードできる AngularJS SPA があります。より正確には、そのラッパーng-flowを使用しています。

flow-btn現在、Selenium で自動化された e2e テストを設定していますが、ユーザーが要素をクリックしたときでも、ドラッグ アンド ドロップを使用したときでも、前述のアップロード メカニズムをテストする方法がわかりません。

グーグルで検索すると、 をクリックしたときに開いたダイアログ ボックスを Web ドライバーが認識できないというこのページflow-btnが見つかりましたが、この最後の要素は<input>要素ではなく、<span> (a を使用する唯一の方法flow-btn)であるため、できます。リンクされたページで提案されている解決策を使用しないでください。

Seleniumでflow.jsファイルのアップロードをテストする方法について何か考えはありますか?

4

2 に答える 2

0

で実装されたアップロードに現在のスクリプトをアップロードする実際の例を次に示しますflowjs

const remote = require('selenium-webdriver/remote');
const path = require('path');

browser.ignoreSynchronization = true;
browser.setFileDetector(new remote.FileDetector);


describe('test suite', function() {

  it('should upload a file remotely', function() {

    browser.get('http://flowjs.github.io/ng-flow/');

    element(by.xpath("//span[.='Upload File']/input"))
      .sendKeys(path.resolve(__dirname, __filename));

    browser.sleep(5000);

    expect(element.all(by.css("div[ng-repeat='file in $flow.files']")).count()).toEqual(1);
  });

});
于 2016-04-27T20:54:45.963 に答える
0

これが役立つかどうかはわかりません... nightwatch.js を使用してアプリをテストし、単一ファイル用の flowJS アップロード ボタンを用意しました。

これを機能させるには、隠しファイルの入力を表示して有効にする必要がありました。次に、ファイルの場所を入力して送信できます。

nightwatch.js のサンプル

    //Re-enable traditional file-input
    this.api.execute(function () {
        document.getElementById('proof-upload-fallback').className = '';
        document.getElementById('proof-upload-fallback').disabled = false;
    });

    this.api.setValue('//input[@id="proof-upload-fallback"]', require('path').resolve(filePath));

    //Click upload
    this.api.clickModalButton('Upload');

html は次のようになります。

<input id="proof-upload-fallback" type="file" flow-btn="" ng-show="false" ng-disabled="true" class="ng-hide" /> 

<button flow-btn="" focus-input="focusButton">Select PDF<input type="file" style="visibility: hidden; position: absolute; width: 1px; height: 1px;"></button>

Submit: <button ng-click="ok()">Upload</button>

ng-click="ok" は flow.js の処理を​​担当します。コードの重要な部分は、selenium ドライバーを介して実際の webapp に渡される JS である execute() です...

于 2016-04-27T14:28:24.850 に答える