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'));
}