ghghghghghg

prod, gov의 UI만 약간 다를 경우

 

page object나 components에서 추가로 구현후 test에서 불러서 사용하기 

 

ui-playwright/
├── tests/                        # Main folder for all test cases
│   ├── mysql.spec.ts             # component test
│   ├── end-to-end/               # End-to-end tests covering full workflows
│   └── ... (other components)    # Specific tests for validating different components
├── pages/                        # Page Object Models (POM) for different pages
│   ├── HomePage.ts               # POM for Home page
│   ├── LoginPage.ts              # POM for Login page
│   ├── DashboardPage.ts          # POM for Dashboard page
│   └── ... (other pages)         # Other individual page POM files
├── components/                   # Component-based models for reusable components
│   ├── TableComponent.ts         # Model for reusable Table component
│   ├── ChartComponent.ts         # Model for reusable Chart component
│   ├── CardComponent.ts          # Model for reusable Card component
│   └── DetailInfoComponent.ts    # Model for reusable Detail info component
├── environments/                 # Environment-specific configurations
│   ├── prod.ts                   # Configurations for production
│   ├── gov.ts                    # Configurations for government
│   └── dev.ts                    # Configurations for development/testing
├── utils/                        # Utility/helper functions
│   ├── navigationUtils.ts        # Functions for navigation across pages
│   ├── userActions.ts            # Functions for user actions
│   └── testData.ts               # Centralized test data utilities
├── fixtures/                     # Playwright fixtures for setup/teardown
│   └── browserContext.ts         # Fixture for browser setup (e.g., logged-in state)
├── reports/                      # Test reports (e.g., HTML, JSON logs)
│   └── report.html
├── playwright.config.ts          # Playwright global configuration settings
├── tsconfig.json                 # TypeScript configuration file
└── package.json                  # Node.js dependencies and scripts

 

prod, gov의 UI만 약간 다를 경우 

 

page object나 components에서 추가로 구현후 test에서 불러서 사용하기 

 

prod, gov의 labl 이나 id정보가 다를경우 (궁극적으로는 통일화가 필요)

 

ui-playwright/
├── tests/                        # Main folder for all test cases
│   ├── mysql.spec.ts             # component test
│   ├── end-to-end/               # End-to-end tests covering full workflows
│   └── ... (other components)    # Specific tests for validating different components
├── pages/                        # Page Object Models (POM) for different pages
│   ├── HomePage.ts               # POM for Home page
│   ├── LoginPage.ts              # POM for Login page
│   ├── DashboardPage.ts          # POM for Dashboard page
│   └── ... (other pages)         # Other individual page POM files
├── components/                   # Component-based models for reusable components
│   ├── TableComponent.ts         # Model for reusable Table component
│   ├── ChartComponent.ts         # Model for reusable Chart component
│   ├── CardComponent.ts          # Model for reusable Card component
│   └── DetailInfoComponent.ts    # Model for reusable Detail info component
├── environments/                 # Environment-specific settings and attribute mapping
│   ├── prod.ts                   # Configurations and mappings for production
│   ├── gov.ts                    # Configurations and mappings for government
│   ├── dev.ts                    # Configurations and mappings for development/testing
├── attributeMapper/              # Attribute Mapper for handling variations between target pages
│   └── elementAttributes.ts      # Map different attribute locators for different target types
├── utils/                        # Utility/helper functions
│   ├── navigationUtils.ts        # Functions for navigation across pages
│   ├── userActions.ts            # Functions for user actions
│   └── testData.ts               # Centralized test data utilities
├── fixtures/                     # Playwright fixtures for setup/teardown
│   └── browserContext.ts         # Fixture for browser setup (e.g., logged-in state)
├── reports/                      # Test reports (e.g., HTML, JSON logs)
│   └── report.html
├── playwright.config.ts          # Playwright global configuration settings
├── tsconfig.json                 # TypeScript configuration file
└── package.json                  # Node.js dependencies and scripts

 

 

interface ElementLocatorMap {
  [key: string]: {
    prod: string;
    gov: string;
  };
}

const elementLocatorMap: ElementLocatorMap = {
  serviceButton: {
    prod: '#service-button-prod',
    gov: '#service-button-gov',
  },
  cardComponent: {
    prod: '.card-prod',
    gov: '.card-gov',
  },
  table: {
    prod: 'table.prod-table',
    gov: 'table.gov-table',
  },
};

export function getElementLocator(elementName: string, targetType: string): string {
  return elementLocatorMap[elementName][targetType];
}