Angular Protactor test getting h1 text from html - html

Question

I am very new in end to end testing. In my app I have a login page, which I want to show the user when they logout from the app. Now there is a text h1 inside the div. But I am not getting the text from that div and that is why the expected result is different from the actual result.
Here is my login page html.
<div *ngIf="!isLoggedIn" class="login-controller">
<div layout="column" class="login-dialog">
<h1>Here is a heading</h1>
<h2>Second Heading</h2>
<div class="border">
...
</div>
</div>
</div>
Here is my app.po.ts
async getLogInPage(){
return await element(by.css('h1')).getText();
}
async logoutOfApplication() {
var userMenu = element(by.css(".prof-dropbtn > span"));
browser.wait(ExpectedConditions.presenceOf(userMenu), 10000);
await userMenu.click();
var logoutButton = element(by.id("logout"));
await logoutButton.click();
}
Now app.e2e-spec.ts
it('Test for logout', () => {
page.logoutOfApplication();
expect(page.getLogInPage()).toEqual('Here is a heading');
page.loginToApplication("email.com", "demo");
});

Answer 1

If you want get h1 value you have to write like this
it('Test for logout', () => {
page.logoutOfApplication();
expect(element.all(by.css('.login-dialog h1')).getText()).toEqual('Here is a heading');
page.loginToApplication("eamil.com", "demo");
});