אוטומציית בדיקות - בחירת אלמנטים יעילה עם Playwright Typescript באמצעות מזהי בדיקה

מבוא

בניית בדיקות מקצה לקצה אמינות עם Playwright ב-TypeScript תלויה לעיתים קרובות ביכולת לנהל סלקטורי אלמנטים ביעילות. בעוד ש-Playwright מספק אסטרטגיות סלקטורים שונות, שימוש במזהי בדיקה מציע פתרון נקי וניתן לתחזוקה המפריד את לוגיקת הבדיקה מעיצוב ומבנה האפליקציה.

במאמר זה, אשתף פתרון המותאם מ-מימוש קודם בפייתון, המותאם במיוחד למערכת האקולוגית של Playwright. גישה זו מוצגת גם בפרויקט הדוגמה שלי Playwright Typescript example project.

הכלים הטכנולוגיים המשמשים למימוש הפתרון הם:

• שפת תכנות: TypeScript
• מנוע בדיקות: Playwright Test

יתרונות השימוש במזהי בדיקה

1. עמיד לשינויים בממשק המשתמש: מזהי בדיקה נשארים יציבים גם כאשר מחלקות, מזהים או אלמנטים מבניים משתנים.
2. כוונה ברורה לבדיקה: מזהי בדיקה מבהירים אילו אלמנטים משמשים לבדיקה. שימוש במזהי בדיקה לבחירת אלמנטים מומלץ בבדיקות אינטרנט, מכיוון שהוא יוצר הפרדה ברורה בין ענייני בדיקה לבין עיצוב או מבנה האפליקציה.

הגדרת תצורת מזהה בדיקה

תכונה משמשת כתכונת מזהה הבדיקה המוגדרת כברירת מחדל. עם זאת, במקרה שלנו, יש לנו תכונת מזהה בדיקה שונה, אנו צריכים לדרוס זאת בקובץ התצורה של Playwright:

import { PlaywrightTestConfig } from "@playwright/test";

const config: PlaywrightTestConfig = {
  use: {
    // Configure the test ID attribute
    testIdAttribute: "data-test",

    // Additional useful configuration
    viewport: null,
    userAgent: "MY_TEST_USER_AGENT",
  },
};

export default config;

מימוש הפתרון

כך ניתן לבצע ריפקטור לסלקטורים קיימים כדי להשתמש במזהי בדיקה. בואו נסתכל על דוגמה מעשית.

לפני:

import { Constants } from "../utilities/constants";
import { FileUtils } from "../utilities/fileUtils";
import { expect, test } from "@playwright/test";
import path from "path";

const data = await FileUtils.readExcelFile(
  path.join(Constants.DATA_PATH, "data.xls")
);

data.forEach(record => {
  test(`Login test for ${record.description}`, async ({ page }) => {
    await page.goto("https://www.saucedemo.com/");
    if (record.user) {
      await page.fill('input[data-test="username"]', record.user);
    }
    if (record.password) {
      await page.fill('input[data-test="password"]', record.password);
    }
    await page.click('input[data-test="login-button"]');
    const errorMessage = page.locator('[data-test="error"]');
    await expect(errorMessage).toHaveText(record.error);
  });
});

אחרי:

import { Constants } from "../utilities/constants";
import { FileUtils } from "../utilities/fileUtils";
import { expect, test } from "@playwright/test";
import path from "path";

const data = await FileUtils.readExcelFile(
  path.join(Constants.DATA_PATH, "data.xls")
);

data.forEach(record => {
  test(`Login test for ${record.description}`, async ({ page }) => {
    await page.goto("https://www.saucedemo.com/");
    if (record.user) {
      await page.getByTestId("username").fill(record.user);
    }
    if (record.password) {
      await page.getByTestId("password").fill(record.password);
    }
    await page.getByTestId("login-button").click();
    const errorMessage = page.getByTestId("error");
    await expect(errorMessage).toHaveText(record.error);
  });
});

שיפורים עיקריים בקוד שעבר ריפקטור:

• הוחלף page.fill() ב-page.getByTestId().fill()
• הוחלף page.click() ב-page.getByTestId().click()
• הוחלף page.locator() ב-page.getByTestId()
• תחביר סלקטור עקבי ונקי יותר לאורך כל הדרך

מסקנה

שימוש במזהי בדיקה עם Playwright ו-TypeScript יוצר בסיס חזק לבדיקות מקצה לקצה. שיטת getByTestId() מספקת דרך נקייה יותר, וניתנת לתחזוקה יותר לבחירת אלמנטים בהשוואה לסלקטורים מסורתיים. על ידי שימוש עקבי במזהי בדיקה, צוותים יכולים לבנות חבילות בדיקה אמינות שקל יותר לתחזק ולעדכן ככל שהאפליקציה מתפתחת.

בדיקות מהנות!