e2e 如何在角度量角器中测试登录成功案例

Question

刚开始使用 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}');`);
}

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

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

但是我的测试用例失败了

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-text类是重定向页面上的元素。

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

Answer 1

我建议执行以下操作：

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

根据我的经验，理解控制流的幕后发生的事情比切换到 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 函数中。

希望这可以帮助。

Answer 2

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

const elm = element(by.css(".logo-text"));
await browser.wait(EC.presenceOf(elm), 40000);
await loginPage.getLocalStorageObject("currentUser"))
        .then((user)=>{
           expect(user).toBeDefined();
        });

Answer 3

您可以使用令牌检查或 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'));
}