Испытания огурца показывают, что пройден, но транспортир не взаимодействует с веб-элементами

Question

Я новичок в Protractor + Cucumber + Typescript и создал образец фреймворка с использованием Page Object Design и небольшого скрипта для выполнения некоторых действий щелчка. URL: http://www.way2automation.com/angularjs-protractor/banking/#/login

Я пытаюсь нажать кнопку «Вход для клиентов», но она не взаимодействует с элементом, и огурец все еще показывает, что тест пройден.

Я пытался использовать async / await для выполнения обещаний, но безуспешно. Транспортир Версия: 5.4.2 Версия TypeScript: 3.3.4000 Версия узла: v10.15.3 Версия NPM: 6.4.1

Feature File:
Feature: To login into XYZ bank

@OutlineScenario
Scenario: Login as Customer

Given I am on XYZ Bank home page
Then I click Customer Login
Then I select Name of Customer
Then I click Login

Объект страницы:

    import { element, by } from "protractor";
    import { Select } from "../utilities/selectClass";
  export class loginPage {

        //elements

        customerLoginButton = element(by.cssContainingText('.btn btn-primary btn-lg', 'Customer Login'));
        loginButton = element(by.className('btn btn-default'));
        yourNameDropDown = element(by.model('custId'));
        bankManagerLoginButton = element(by.xpath("//button[contains(text(),'Bank Manager Login')]"));
        homeButton = element(by.className('btn home'));

        //function to click on Customer Login
        customerLogin() {
            this.customerLoginButton.click();
        }

        //function to select on Name from Dropdown
        selectName() {
            const select: Select = new Select(this.yourNameDropDown);
            select.selectByVisibleText("Harry Potter");
        }

        //function to click on Login
        clickLogin() {
            this.loginButton.click();
        }

        //function to click on Bank Manager Login
        bankManagerLogin() {
            this.bankManagerLoginButton.click();
        }

        clickHome() {
            this.homeButton.click();
        }
    }

StepDefinition:

import {loginPage} from "../pages/loginPage";
import {addCustomer} from "../pages/addCustomer";
import { browser } from "protractor";
import { Then, Given } from "cucumber";
const chai = require("chai").use(require("chai-as-promised"));
const expect = chai.expect;
const login: loginPage = new loginPage();
const addcustomer: addCustomer = new addCustomer();

Given('I am on XYZ Bank home page', function() {
    expect(browser.getTitle()).to.eventually.equal("Protractor practice website - Banking App");
   });

Then(/^I click Customer Login$/, function() {
   login.customerLogin();
  });

  Then('I select Name of Customer', function() {
   login.selectName();
 });

 Then('I click Login', function () {
   login.clickLogin();
 });

config.ts

import { browser, Config } from "protractor";
import { Reporter } from "../utilities/reporter";
const jsonReports = process.cwd() + "/reports/json";

export const config: Config = {
    seleniumAddress: "http://127.0.0.1:4444/wd/hub",

    SELENIUM_PROMISE_MANAGER: false,

    baseUrl: "http://www.way2automation.com/angularjs-protractor/banking/#/login",

    capabilities: {
        browserName: "chrome",
    },

    framework: "custom",
    frameworkPath: require.resolve("protractor-cucumber-framework"),

    specs: [
        "../../features/*.feature",
    ],

    onPrepare: () => {
        browser.ignoreSynchronization = true;
        browser.manage().window().maximize();
        Reporter.createDirectory(jsonReports);
    },

    cucumberOpts: {
        compiler: "ts:ts-node/register",
        format: "json:./reports/json/cucumber_report.json",
        require: ["../../typeScript/stepdefinitions/*.js", "../../typeScript/utilities/*.js"],
        strict: true,
        tags: "@CucumberScenario or @ProtractorScenario or @TypeScriptScenario or @OutlineScenario",
    },

    onComplete: () => {
        Reporter.createHTMLReport();
    },
}

Answer 1

Транспортир выполняет свои функции асинхронно, поэтому вам придется подождать, пока обещания не будут выполнены.Вы можете сделать это, используя функцию then, , вот руководство по обещаниям.

Существует другой способ обработки обещаний с использованием async/await, который я рекомендовал бы, потому что ваш кодгораздо более читабельным.Вы должны сделать все свои функции определения шагов async и вызвать функции транспортира с помощью await, что остановит выполнение следующего кода, пока не будет выполнено обещание.Ваша функция и шаг customer login должны выглядеть следующим образом:

async customerLogin() {
    await this.customerLoginButton.click();
}

Then(/^I click Customer Login$/, async function() {
    await login.customerLogin();
}

Если вы используете asnyc/await, вам не нужно использовать chai-as-promised, потому что await на asyncФункция возвращает значение так же, как chai s eventually, которое ожидает разрешения, которое будет выполнено.Поэтому вы должны заменить текущий шаг I am on XYZ Bank home page следующим:

expect(await browser.getTitle()).to.equal("Title");

Вот несколько замечательных источников:

• Как использовать асинхронное / ожидание в транспортире
• Как использовать объектную модель страницы с async / await

Answer 2

Если вы используете поток управления веб-драйвера (т.е. НЕ асинхронный / ожидающий), вам необходимо вернуть последнюю строку каждого шага , включая expects, в котором используется eventually. Например, login.customerLogin() возвращает обещание, которое никогда не будет выполнено, вы должны использовать return login.customerLogin(), чтобы Cucumber мог выполнить его за вас.

FWIW, мы обнаружили, что переключение на async/await вместо потока управления значительно облегчило написание тестов в транспортире. Я не могу сосчитать, сколько раз мы забыли вернуть один шаг или одно утверждение и у нас есть ложные срабатывания или странные ошибки.