Angularjs以外のWebサイトでProtractorを使用する方法は？

AngularJSWebアプリケーション用に作成されたProtractorフレームワークを見つけました。

AngularJSを使用していないWebサイトでProtractorを使用するにはどうすればよいですか？

私は最初のテストを作成し、分度器がこのメッセージをトリガーします。

Error: Angular could not be found on the page https://www.stratexapp.com/ : retries looking for angular exceeded

テストが角度のないページと対話する必要がある場合は、を使用してWebdriverインスタンスに直接アクセスしますbrowser.driver。

分度器のドキュメントからの例

browser.driver.get('http://localhost:8000/login.html');

browser.driver.findElement(by.id('username')).sendKeys('Jane');
browser.driver.findElement(by.id('password')).sendKeys('1234');
browser.driver.findElement(by.id('clickme')).click();

別のアプローチは、browser.get（...）のbrowser.ignoreSynchronization = true 前に設定することです。分度器はAngularがロードされるのを待たず、通常のelement（...）構文を使用できます。

browser.ignoreSynchronization = true;
browser.get('http://localhost:8000/login.html');

element(by.id('username')).sendKeys('Jane');
element(by.id('password')).sendKeys('1234');
element(by.id('clickme')).click();

非推奨のignoreSynchronizationプロパティの代わりにwaitForAngularを使用する必要があります。

次のwaitForAngularガイダンスは、タイムアウトについてProtractorドキュメントから取得されます。

Angularの待機を無効にする方法

Angularを使用していないページに移動する必要がある場合は、 `browser.waitForAngularEnabled（false）を設定することで、Angularの待機をオフにできます。例えば：

browser.waitForAngularEnabled(false);
browser.get('/non-angular-login-page.html');

element(by.id('username')).sendKeys('Jane');
element(by.id('password')).sendKeys('1234');
element(by.id('clickme')).click();

browser.waitForAngularEnabled(true);
browser.get('/page-containing-angular.html');

非角度サイトでテストするには、同期を削除する必要があります。そのためには、以下を使用します。

browser.ignoreSynchronisation = true;
browser.get('url');

場合によっては、エラーを回避するために両方の値を追加する必要があります。

 browser.driver.ignoreSynchronization = true;
 browser.waitForAngularEnabled(false); 

それらをspec.jsファイルに追加できます。

describe('My first non angular class', function() {
    it ('My function', function() {
        browser.driver.ignoreSynchronization = true;
        browser.waitForAngularEnabled(false);

または、@ Mridulの提案に従って、config.jsファイルに追加します。

exports.config = {directConnect：true、フレームワーク： 'jasmine'、

  onPrepare: function () {
         browser.driver.ignoreSynchronization = true;// for non-angular set true. default value is false 
         browser.waitForAngularEnabled(false);   // for non-angular set false. default value is true  
       },

個人的には、DOM要素が時間内に適切に読み込まれなかったため、提案されたソリューションでは成功しませんでした。

browser.waitとbrowser.isElementPresentを含む、その非同期動作を処理する多くの方法を試しましたが、どれも満足のいくものではありませんでした。

トリックは、onPrepareのメソッドからProtractorが返すPromisesを使用することでした。

onPrepare: () => {

    browser.manage().window().maximize();

    browser.waitForAngularEnabled(true).then(function () {
        return browser.driver.get(baseUrl + '/auth/');
    }).then(function () {
        return browser.driver.findElement(by.name('login')).sendKeys('login');
    }).then(function () {
        return browser.driver.findElement(by.name('password')).sendKeys('password');
    }).then(function () {
        return browser.driver.findElement(by.name('submit')).click();
    }).then(function () {
        return true;
    });

    return browser.driver.wait(function () {
        return browser.driver.getCurrentUrl().then(function (url) {
            return /application/.test(url);
        });
    }, 10000);
},

https://github.com/angular/protractor/blob/master/spec/withLoginConf.jsに触発されました

以下のスニペットを.jsスペックファイルに追加します

beforeAll(function() {
    browser.waitForAngularEnabled(false);
});

conf.jsファイルに次のコードを追加します

   onPrepare: function () {
       browser.ignoreSynchronization = true;      
   }

非角度アプリケーションのスニペットを以下に追加します。

app- browser.ignoreSynchronization = true;

角度のないアプリケーションの場合は、config.jsファイルで以下のスニペットを使用してください-

browser.ignoreSynchronization = true;

角度のあるアプリケーションの場合-

browser.ignoreSynchronization = false;

私はAngular、Reactに似たFEフレームワークであるaureliaウェブアプリに取り組んでいます。この中で私は自動化のために分度器を使用しています。

私のプロジェクトのどれを技術スタック：-

• 分度器
• Typescript
• ページオブジェクトモーダル
• きゅうり
• チャイ
• ノード
• npm
• VSコード（IDE）

主な変更は構成ファイルでのみ発生します。それが役立つ場合は、githubにコードを追加できます。これは、プロジェクトで使用している構成ファイルで、私に最適です。私のワードプレスにもいくつかのブログを投稿しました。それがお役に立てば幸いです。

const reporter = require('cucumber-html-reporter');
exports.config = {
    SELENIUM_PROMISE_MANAGER: false,
    directConnect: true,
    specs: ["./e2e/features/*/EndToEnd.feature"],
    format: 'json:cucumberReport.json',
    framework: 'custom',
    frameworkPath: require.resolve('protractor-cucumber-framework'),
    cucumberOpts: {
        strict: true,
        format: 'json:cucumberReport.json',
        keepAlive: false,
        require: [
            './e2e/hooks/*.ts',
            './e2e/stepDefinition/*/*.ts',
        ],
       tags: '@Regression'
    },
    beforeLaunch: function () {
        require('ts-node/register')
    },
    onPrepare: async () => {
        await browser.waitForAngularEnabled(false);
        await browser.ignoreSynchronization == true;
        await browser.manage().window().maximize();
        await browser.manage().timeouts().implicitlyWait(10000);
     },
    onComplete: async () => {
         var options = {
            theme: 'bootstrap',
            jsonFile: './reports/cucumberReport.json',
            output: './reports/cucumberReport.html',
            reportSuiteAsScenarios: true,
            launchReport: false,
            screenshotsDirectory: './reports/screenshots',
            storeScreenshots: true,
            metadata: {
                "Test Environment": "SAND-DEV-1",
                "Platform": "Windows 10",
            }
        };
        reporter.generate(options);
    },
};

分度器の代わりに、Testcafeのe2eテストに使用できます。
長所：

• ES2016構文
• 追加の依存関係、構成、ブラウザプラグインは必要ありません
• 柔軟なセレクター
• 簡単なセットアップ