Playwright - 断言预期验证与验证结果匹配

Question

我有以下代码用于断言验证错误消息与元素文本内容匹配

test('Assert validations are present on the checkout page', async ({ page }) => {
  await page.goto('private');
 
  await page.getByRole('button', { name: 'Headwear' }).click()
  await page.locator("//a[contains(text(),'Adult')]").click()

  const productGrid = await page.waitForSelector('div[id="productGrid"]');
  const products = await productGrid.$$('div[class="product-card relative w-full"]');
  for (const product of products) {
    const outOfStockLabel = await product.$('div:has-text("Out of stock")');
    if (!outOfStockLabel) {
      await product.click();
      break;
    }
  }

  await page.click('#btnAddToCart');
  await page.locator("//button[@title='Toggle Basket']//*[name()='svg']").click();
  await page.click("#btnCartPopUpCheckout");
  await page.click("#pay-button-container");

    // Step 2: Assert the validation messages for each field
    await page.waitForSelector("#error-for-email");
    await page.waitForSelector("#error-for-TextField1");
    await page.waitForSelector("#error-for-TextField2");
    await page.waitForSelector("#error-for-shipping-address1");
    await page.waitForSelector("#error-for-TextField4");
    await page.waitForSelector("#error-for-TextField5");
    await page.waitForSelector("#error-for-number");
    await page.waitForSelector("#error-for-expiry");
    await page.waitForSelector("#error-for-verification_value");
    await page.waitForSelector("#error-for-name");
  
    const emailValidation = await page.$eval('#error-for-email', (element) => element.textContent);
    const firstNameValidation = await page.$eval('#error-for-TextField1', (element) => element.textContent);
    const lastNameValidation = await page.$eval('#error-for-TextField2', (element) => element.textContent);
    const addressValidation = await page.$eval('#error-for-shipping-address1', (element) => element.textContent);
    const cityValidation = await page.$eval('#error-for-TextField4', (element) => element.textContent);
    const postcodeValidation = await page.$eval('#error-for-TextField5', (element) => element.textContent);
    const cardNumberValidation = await page.$eval('#error-for-number', (element) => element.textContent);
    const expirationDateValidation = await page.$eval('#error-for-expiry', (element) => element.textContent);
    const securityCodeValidation = await page.$eval('#error-for-verification_value', (element) => element.textContent);
    const nameOnCardValidation = await page.$eval('#error-for-name', (element) => element.textContent);
  
    const expectedValidations = {
      email: 'Enter an emdail',
      firstName: 'Enter a first name',
      lastName: 'Enter a last name',
      address: 'Enter an address',
      city: 'Enter a city',
      postcode: 'Enter a ZIP / postal code',
      cardNumber: 'Enter a card number',
      expirationDate: 'Enter a valid expiration date',
      securityCode: 'Enter the CVV or security code on your card',
      nameOnCard: "Enter your name exactly as it’s written on your card",
    };
  
    const validationResults = {
      email: emailValidation,
      firstName: firstNameValidation,
      lastName: lastNameValidation,
      address: addressValidation,
      city: cityValidation,
      postcode: postcodeValidation,
      cardNumber: cardNumberValidation,
      expirationDate: expirationDateValidation,
      securityCode: securityCodeValidation,
      nameOnCard: nameOnCardValidation,
    };
  
    let allValidationsPassed = true;
  
    for (const field in expectedValidations) {
      if (validationResults[field] !== expectedValidations[field]) {
        console.log(`Validation failed for ${field}: Expected "${expectedValidations[field]}", but got "${validationResults[field]}"`);
        allValidationsPassed = false;
      }
    }
  
    if (allValidationsPassed) {
      console.log('All field validations passed!');
    } else {
      console.log('Some field validations failed.');
    }

})

我运行代码并且它通过了测试，即使预期的验证消息之一不正确。如果验证不匹配，我希望测试失败，我做错了什么？

Answer 1

更改为使用 Expect 和定位器，而不是 waitforselectors 和 $eval 函数，测试现在按预期失败了

const expectedValidations = {
  email: 'Enter an email',
  firstName: 'Enter a first name',
  lastName: 'Enter a last name',
  address: 'Enter an address',
  city: 'Enter a city',
  postcode: 'Enter a ZIP / postal code',
  cardNumber: 'Enter a card number',
  expirationDate: 'Enter a valid expiration date',
  securityCode: 'Enter the CVV or security code on your card',
  nameOnCard: "Enter your name exactly as it’s written on your card",
};

const validationResults = {
  email: await page.textContent('#error-for-email'),
  firstName: await page.textContent('#error-for-TextField1'),
  lastName: await page.textContent('#error-for-TextField2'),
  address: await page.textContent('#error-for-shipping-address1'),
  city: await page.textContent('#error-for-TextField4'),
  postcode: await page.textContent('#error-for-TextField5'),
  cardNumber: await page.textContent('#error-for-number'),
  expirationDate: await page.textContent('#error-for-expiry'),
  securityCode: await page.textContent('#error-for-verification_value'),
  nameOnCard: await page.textContent('#error-for-name'),
};

for (const field in expectedValidations) {
  expect(validationResults[field]).toBe(expectedValidations[field]);
  
}