2

刚开始使用 e2e，我想在 Angular 应用程序中测试登录成功案例。所以这是我的测试用例

it("when login is successful — user object should be set in storage", () => {
        loginPage.fillCredentials();

        // wait until redirected to new lage
        const EC = protractor.ExpectedConditions;
        const elm = element(by.css(".logo-text"));
        browser.wait(EC.presenceOf(elm), 40000);
        expect(loginPage.getLocalStorageObject("currentUser")).toBeDefined();
        const currentUser = JSON.parse(loginPage.getLocalStorageObject("currentUser"));
        expect(currentUser.CarrierId).toBeDefined();
    });

和

fillCredentials(credentials: any = this.credentials): any {
   this.getFormField("email").sendKeys(credentials.userName);
   this.getFormField("password").sendKeys(credentials.password);
   element(by.css("button[aria-label='Login']")).click();
}

getLocalStorageObject(key): any {
    browser.executeScript(`return window.localStorage.getItem('${key}');`);
}

我提供了正确的用户凭据，然后点击登录按钮。

在应用程序中，当使用正确的凭据完成登录时，它会设置currectUser对象localStorage并重定向到从登录页面返回的页面。

但是我的测试用例失败了

when login is successful — user object should be set in storage
      - Expected undefined to be defined.

我正在使用这样的等待功能it

const EC = protractor.ExpectedConditions;
const elm = element(by.css(".logo-text"));
browser.wait(EC.presenceOf(elm), 40000);

其中.logo-textclass 是重定向页面上存在的元素。

这是正确的方法还是需要做其他事情？

4

3 回答 3

2

我建议执行以下操作：

关闭 Protractor 的控制流并切换到 async/await 语法。不推荐使用控制流功能，请参阅文档。

以我的经验，理解控制流幕后发生的事情比切换到异步/等待语法要困难得多。这将使您完全控制代码的执行方式。您可以通过添加SELENIUM_PROMISE_MANAGER: false到量角器配置文件来做到这一点。

所以你的代码片段必须这样写：

it("when login is successful — user object should be set in storage", async() => {
        await loginPage.fillCredentials();

        // wait until redirected to new lage
        const EC = protractor.ExpectedConditions;
        const elm = element(by.css(".logo-text"));
        await browser.wait(EC.presenceOf(elm), 40000);
        expect(await loginPage.getLocalStorageObject("currentUser")).toBeDefined();
        const currentUser = JSON.parse(loginPage.getLocalStorageObject("currentUser"));
        expect(currentUser.CarrierId).toBeDefined();
    });

async fillCredentials(credentials: any = this.credentials): Promise<void> {
   await this.getFormField("email").sendKeys(credentials.userName);
   await this.getFormField("password").sendKeys(credentials.password);
   await element(by.css("button[aria-label='Login']")).click();
}


getLocalStorageObject(key): Promise<void> {
    return browser.executeScript(`return window.localStorage.getItem(arguments[0]);`, key);
}

在您的getLocalStorageObject函数中，您忘记了返回值。而且您不能将这样的变量传递给 executeScript 函数。

希望这可以帮助。

于 2019-08-18T10:00:50.370 回答
1

我认为nephi的解决方案应该有效。如果它没有在他的解决方案中添加以下代码行

const elm = element(by.css(".logo-text"));
await browser.wait(EC.presenceOf(elm), 40000);
await loginPage.getLocalStorageObject("currentUser"))
        .then((user)=>{
           expect(user).toBeDefined();
        });
于 2019-08-18T11:57:54.957 回答
0

您可以使用令牌检查或 URL 重定向检查：

  it('should login with success , Token Check', async () => {
   
  
    const emailInput: ElementFinder = page.getEmailInput();
    const passwordInput: ElementFinder = page.getPasswordInput();        
    const loginBtn: ElementFinder = page.getLoginBtn();


    const userToken = 'test_token';
    emailInput.sendKeys('login@gmail.com');
    passwordInput.sendKeys('password');

    loginBtn.click();

    const localStorageToken = await browser.executeScript('return localStorage.getItem("_token");');
    expect(localStorageToken).toEqual(userToken);

});

使用 URL 重定向检查：

      it('should login with success ,  Url Redirect Check', async () => {
   
  
    const emailInput: ElementFinder = page.getEmailInput();
    const passwordInput: ElementFinder = page.getPasswordInput();        
    const loginBtn: ElementFinder = page.getLoginBtn();


    const userToken = 'test_token';
    emailInput.sendKeys('login@gmail.com');
    passwordInput.sendKeys('password');

    loginBtn.click();

    expect(browser.getCurrentUrl()).toEqual(browser.baseUrl + '/home');

});

您还需要在 page.po.ts 中实现 getEmailInput() 、 getPasswordInput() 、 getLoginBtn()

举个例子 ：

getEmailInput(): ElementFinder {
    return element(by.css('.email-input'));
}

getPasswordInput(): ElementFinder {
    return element(by.css('.password-input'));
}

getLoginBtn(): ElementFinder {
    return element(by.css('.login-btn'));
}
于 2021-03-06T17:01:59.657 回答