使用Nightmare.js与TypeScript实现页面URL校验的自动化测试问题

Hey there! I see you're building login automation tests with Nightmare.js and TypeScript, and you need to confirm that the redirect to the correct page works after a successful login. Let's get that test working properly—here's a step-by-step solution:

First, let's fill out your incomplete test with the URL verification logic, plus some best practices for Nightmare.js testing:

import * as Nightmare from "nightmare";
import { expect } from 'chai'; // We'll use Chai for assertions (install via npm first)

describe("Login Page", function() {
  this.timeout("30s"); // Keep your extended timeout for slow login flows
  let nightmare: Nightmare;

  beforeEach(() => {
    nightmare = new Nightmare({ show: true });
  });

  // Critical cleanup: shut down Nightmare after each test to avoid leaks
  afterEach(async () => {
    await nightmare.end();
  });

  describe("when given correct login details", () => {
    it("should redirect to the expected dashboard page", async () => {
      // Replace these values with your app's actual URLs and selectors
      const loginPageUrl = "https://your-app.com/login";
      const expectedDashboardUrl = "https://your-app.com/dashboard";
      
      const currentUrl = await nightmare
        .goto(loginPageUrl) // Navigate to your login page
        .type("#username", "your-valid-username") // Target your username input
        .type("#password", "your-valid-password") // Target your password input
        .click("#submit-login") // Click the login button
        .wait("#dashboard-header") // Wait for a unique element on the target page (critical for reliability)
        .url(); // Fetch the current page's URL

      // Assert the URL matches what you expect
      expect(currentUrl).to.equal(expectedDashboardUrl);

      // If you only need to check for a partial URL match (e.g., containing "/dashboard"), use:
      // expect(currentUrl).to.include("/dashboard");
    });
  });
});

Key Details Explained: #

• nightmare.url(): This method returns a Promise that resolves to the current page's full URL—it's the core tool for checking where you've landed after login.
• wait(): Always use this before fetching the URL! Waiting for a unique element on the target page (like #dashboard-header) ensures the page has fully loaded before you check the URL, avoiding false failures from slow loading.
• Async/Await: Using async/await makes the code clean and readable, which is especially nice in TypeScript for type safety. If you prefer Promise chaining, you can rewrite the test with .then() instead:

  it("should redirect to the expected dashboard page", () => {
    return nightmare
      .goto(loginPageUrl)
      .type("#username", "your-valid-username")
      .type("#password", "your-valid-password")
      .click("#submit-login")
      .wait("#dashboard-header")
      .url()
      .then((currentUrl) => {
        expect(currentUrl).to.equal(expectedDashboardUrl);
      });
  });
  

• Cleanup Hook: The afterEach block ensures we shut down the Nightmare instance after every test, preventing memory leaks or leftover browser windows.

Quick Tips: #

• Make sure your selectors (#username, #submit-login, etc.) match the actual elements on your login page—use your browser's dev tools to inspect and copy the correct selectors.
• If your app uses hash-based routing (e.g., https://your-app.com/#/dashboard), make sure to include the hash in your expected URL.
• For partial URL checks (like verifying you're on any subpage of /dashboard), use Chai's include assertion as commented in the code.

内容的提问来源于stack exchange，提问作者Aidan el Goste