编写Protractor测试用例：指定登录按钮的测试脚本开发需求

Got it, let's walk through how to write a solid Protractor test for that Sign In button you shared. Here's a practical, step-by-step breakdown tailored to your element:

We'll cover the most critical test cases to validate this button's behavior, along with clean, maintainable code.

Test Case 1: Button displays only when user is logged out #

Since the button uses ng-if="!isLoggedIn()", we need to confirm it's visible exclusively in the logged-out state.

describe('Landing Page - Sign In Button', () => {
  beforeEach(() => {
    // Navigate to your app's landing page before each test
    browser.get('/'); // Replace with your actual landing page URL
  });

  it('should show the Sign In button when user is not logged in', () => {
    // Use a unique locator (combining ui-sref and class for specificity)
    const signInBtn = element(by.css('.mob-btn[ui-sref="login"]'));
    
    // Verify the button exists and is visible
    expect(signInBtn.isPresent()).toBe(true);
    expect(signInBtn.isDisplayed()).toBe(true);
  });
});

Test Case 2: Button has the correct translated text #

The button uses translate="landing.text.signin", so we’ll check that the rendered text matches the expected translated value.

it('should display the correct "Sign In" text', () => {
  // Use link text locator (adjust if your translated text differs)
  const signInBtn = element(by.linkText('Sign In'));
  
  // If your app uses dynamic i18n, you could fetch the translated value instead of hardcoding
  expect(signInBtn.getText()).toBe('Sign In'); // Update to your actual translated text
});

Test Case 3: Clicking the button navigates to the login page #

Since it uses ui-sref="login", clicking should take the user to the login route.

it('should navigate to the login page when clicked', () => {
  // Use the ui-sref locator directly for precision
  const signInBtn = element(by.uiSref('login'));
  
  signInBtn.click();
  
  // Verify the URL updates to the login path
  expect(browser.getCurrentUrl()).toContain('/login');
  
  // Optional: Confirm the login page loads by checking a unique element
  const loginPageHeader = element(by.css('h1.login-title')); // Replace with your login page element
  expect(loginPageHeader.isDisplayed()).toBe(true);
});

Alternative Locators for Flexibility #

Depending on your app's structure, these locators might be more reliable:

• by.binding('landing.text.signin'): Targets the translation binding directly
• by.css('a[href="/login"]'): Uses the href attribute for specificity
• by.className('mob-btn'): Only use this if there are no other .mob-btn elements on the page

Pro Tips for Stable Tests #

• Use ExpectedConditions to wait for elements to be ready (avoids flaky tests):

  const EC = protractor.ExpectedConditions;
  const signInBtn = element(by.uiSref('login'));
  browser.wait(EC.elementToBeClickable(signInBtn), 5000); // Wait up to 5 seconds
  signInBtn.click();
  

• Always prioritize unique locators (combining attributes like ui-sref + class reduces the chance of targeting the wrong element)
• Protractor waits for Angular to stabilize by default, but you can call browser.waitForAngular() explicitly if needed for async operations

内容的提问来源于stack exchange，提问作者Saqib Tanvir