비동기/분지기의 상용구 대기

Question

async/await과 protractor을 TypeScript으로 사용하려고합니다. 예제를 다음에 따라갑니다 : https://github.com/angular/protractor/tree/master/exampleTypescript/asyncAwait

내 실험에서 잘 작동합니다. 그러나 브라우저 상호 작용과 관련된 모든 호출에 await을 사용해야합니다. 예를 들어

:

login.ts :

import {browser, element, by, By, $, $$, ExpectedConditions} from "protractor"; 
import { DashboardPage } from "./dashboard"; 
export class LoginPage { 
    usernameInput = element(by.id("username")); 
    passwordInput = element(by.id("password")); 
    loginButton = element(by.id("login_button")); 

    async get() { 
     await browser.get(login_url); 
     return this; 
    } 

    async getTitle() { 
     let title = await browser.getTitle(); 
     return title; 
    } 

    async typeUsername(username: string) { 
     await this.usernameInput.sendKeys(username); 
    } 

    async typePassword(password: string) { 
     await this.passwordInput.sendKeys(password); 
    } 

    async login() { 
     await this.loginButton.click(); 
     return new DashboardPage(); 
    } 
} 

LoginSpec.ts : 위에서

import {browser, element, by, By, $, $$, ExpectedConditions} from "protractor"; 
import { LoginPage } from "../pages/login"; 
describe("Login Page", function() { 

    beforeEach(() => { 
     // login page is not an angular page. 
     browser.ignoreSynchronization = true; 
    }); 

    afterEach(() => { 
     browser.ignoreSynchronization = false; 
    }); 

    it("should go to dashboard page after successfully login", async(): Promise<any> => { 
     let loginPage = new LoginPage(); 
     await loginPage.get(); 
     await loginPage.typeUsername(username); 
     await loginPage.typePassword(password); 
     let dashboard = await loginPage.login(); 
     expect(await dashboard.getTitle()).toEqual(`Dashboard`); 
    }); 
}); 

나는 로그인 페이지에 대한 페이지 개체가 테스트 사양, 브라우저 상호 작용에 대한 모든 호출에 많은 await을 사용해야합니다. 이는 await에 대한 많은 상용구를 소개합니다.

질문은 상용구를 줄이려는 아이디어 나 방법이 있습니까? 또한 async/await과 protractor을 사용하는 올바른 방법입니까?

Answer 1

불행히도 이러한 모든 것없이 - 코드가 제대로 동기화되지 않습니다. 두 가지 경우가 있습니다. 붙여 넣기를 생략 할 수 있습니다. 그러나 대부분의 경우 이것이 필요합니다. 잠깐 기다리면 약속이 하나씩 차례로 만들어집니다.

Async/Await은 여전히 ​​Promises를 사용하고 있습니다. 그래서 await를 코드는 다음과 동일하게 작동합니다

it("should go to dashboard page after successfully login",(): Promise<any> => { 
    let loginPage = new LoginPage(); 
    return loginPage.get().then(() => { 
     return loginPage.typeUsername(username); 
    }).then(() => { 
     return loginPage.typePassword(password); 
    }).then(()=> { 
     return loginPage.login(); 
    }).then((dashboard)=> { 
     return expect(dashboard.getTitle()).toEqual(`Dashboard`); 
    }) 
}); 

그래서 약속 체인을 통해 좋은 문법 설탕처럼 기다리고을 고려 https://github.com/SeleniumHQ/selenium/wiki/WebDriverJs#option-1-use-classic-promise-chaining

그러나이 기다리고주지 않고 동기화하는 방법은 무엇입니까 \ thens 발전기는 콜백을 \ \ . 그것은 '섬유'라고 불렀습니다. 불행하게도 각도기는이 기능을 지원하지 않지만, WebdriverIO 코드 동기화를 사용하여 쉽게 await를 사용하지 않고 순서대로 다음을 실행할 수 있습니다 https://www.facebook.com/ProtractorAngularJS/posts/1950761568515087

Answer 2

을,하지만 난 가독성을 위해 기다리고 고수하는 것이 좋습니다.

다음은 코드가 await없이 표시되는 방식입니다.

import { LoginPage } from "../pages/login"; 

describe("Login Page", function() { 

    // mutable crap 

    it("should go to dashboard page after successfully login",() => { 
     const loginPage = new LoginPage(); 

     const asyncs = [ 
      () => loginPage.get(), 
      () => loginPage.typeUsername(username), 
      () => loginPage.typePassword(password), 
      () => loginPage.login(), 
      (dashboard: Dashboard) => dashboard.getTitle() 
     ]; 

     const tilePromise = asyncs.reduce((promised, next) => promised.then(next)); 

     // note the return. this is required 
     return titlePromise.then(dashboardTitle => { 
      expect(dashboardTitle).toEqual('Dashboard'); 
     }); 
    }); 
}); 

는 다시, 나는 await 뷰의 가독성 점에서 바람직하다 생각하지만, 당신이 그것을 사용하는 것이 의무화 언어 아무것도 없다.