ui-automation / xfbhAutoTest · Files

import { Page, Locator, expect } from '@playwright/test';
import { BasePage } from './basePage';

/**
 * 客户管理页面选择器
 */
const selectors = {
  // 导航
  customerMenu: 'text=客户管理',
  addCustomerButton: 'text=新增客户',
  
  // 表单字段
  customerNameInput: 'textbox', // 客户名称输入框
  phoneInput: 'spinbutton', // 手机号输入框
  idCardInput: 'textbox', // 身份证输入框
  
  // 客户分组
  customerGroupPicker: '.nut-input__mask',
  normalCustomerOption: 'uni-view:has-text("普通客户")',
  
  // 赊欠额度
  creditLimitSwitch: '.nut-form-item__body__slots > .nut-switch',
  creditLimitInput: 'uni-input:has-text("请输入赊欠额度/不输为不限额") input',
  
  // 车牌号
  // licensePlateInput: '.nut-input__mask',
  licensePlateInput:'uni-view:nth-child(11) > .nut-cell__value > .nut-form-item__body__slots > .input-wrapper > .flex-input > .nut-input > .nut-input__value > .nut-input__mask',
  confirmLicenceButton:'text=确定',
  // 省市区选择
  regionPicker: 'uni-view:nth-child(12) > .nut-cell__value > .nut-form-item__body__slots > .input-wrapper > .flex-input > .nut-input > .nut-input__value > .nut-input__mask',
  confirmRegionButton: 'text=确认选择',
  
  // 详细地址
  detailedAddressInput: 'uni-view:nth-child(13) > .nut-cell__value > .nut-form-item__body__slots > .nut-input > .nut-input__value > .nut-input__input > .uni-input-wrapper > .uni-input-input',
  
  // 操作按钮
  confirmButton: 'text=确定',
  saveButton: 'text=保存',
  
  // 验证
  customerInList: (customerName: string) => `uni-view:has-text("${customerName}")`,
};

/**
 * 客户管理页面类
 * 处理客户管理相关操作
 */
export class CustomerPage extends BasePage {
  // 导航定位器
  readonly customerMenu: Locator;
  readonly addCustomerButton: Locator;
  
  // 表单字段
  readonly customerNameInput: Locator;
  readonly phoneInput: Locator;
  readonly idCardInput: Locator;
  
  // 客户分组
  readonly customerGroupPicker: Locator;
  readonly normalCustomerOption: Locator;
  
  // 赊欠额度
  readonly creditLimitSwitch: Locator;
  readonly creditLimitInput: Locator;
  
  // 车牌号
  readonly licensePlateInput: Locator;
  
  // 省市区选择
  readonly regionPicker: Locator;
  readonly confirmRegionButton: Locator;
  
  // 详细地址
  readonly detailedAddressInput: Locator;
  
  // 操作按钮
  readonly confirmButton: Locator;
  readonly saveButton: Locator;

  constructor(page: Page) {
    super(page);
    
    this.customerMenu = page.getByText('客户管理').first();
    this.addCustomerButton = page.getByText('新增客户');
    this.customerNameInput = page.getByRole('textbox').nth(1);
    this.phoneInput = page.getByRole('spinbutton').first();
    this.idCardInput = page.getByRole('textbox').nth(2);
    this.customerGroupPicker = page.locator('.nut-input__mask').first();
    this.normalCustomerOption = page.locator('uni-view').filter({ hasText: /^普通客户$/ }).nth(3);
    this.creditLimitSwitch = page.locator('.nut-form-item__body__slots > .nut-switch');
    this.creditLimitInput = page.locator('uni-input').filter({ hasText: '请输入赊欠额度/不输为不限额' }).getByRole('spinbutton');
    this.licensePlateInput = page.locator('.nut-input__mask').first();
    this.regionPicker = page.locator('uni-view:nth-child(11) > .nut-cell__value > .nut-form-item__body__slots > .input-wrapper > .flex-input > .nut-input > .nut-input__value > .nut-input__mask');
    this.confirmRegionButton = page.getByText('确认选择');
    this.detailedAddressInput = page.locator('uni-view:nth-child(12) > .nut-cell__value > .nut-form-item__body__slots > .nut-input > .nut-input__value > .nut-input__input > .uni-input-wrapper > .uni-input-input');
    this.confirmButton = page.getByText('确定');
    this.saveButton = page.getByText('保存');
  }

  /**
   * 导航到首页并等待加载
   */
  async gotoHome(): Promise<void> {
    await this.navigate('/');
    await this.page.waitForLoadState('networkidle', { timeout: 30000 });
  }

  /**
   * 打开客户管理页面
   */
  async openCustomerManagement(): Promise<void> {
    await this.customerMenu.click({ force: true });
    await this.page.waitForLoadState('networkidle', { timeout: 30000 });
  }

  /**
   * 点击新增客户按钮
   */
  async clickAddCustomer(): Promise<void> {
    await this.addCustomerButton.click();
    await this.page.waitForLoadState('networkidle', { timeout: 30000 });
  }

  /**
   * 填写客户名称
   * @param name 客户名称
   */
  async fillCustomerName(name: string): Promise<void> {
    await this.customerNameInput.click();
    await this.customerNameInput.fill(name);
  }

  /**
   * 清除并填写客户名称
   * @param name 客户名称
   */
  async clearAndFillCustomerName(name: string): Promise<void> {
    await this.customerNameInput.click();
    // 点击清除图标
    await this.page.locator('.nut-input__clear-icon').first().click();
    await this.customerNameInput.fill(name);
  }

  /**
   * 填写手机号
   * @param phone 手机号
   */
  async fillPhone(phone: string): Promise<void> {
    await this.phoneInput.click();
    await this.phoneInput.fill(phone);
  }

  /**
   * 清除并填写手机号
   * @param phone 手机号
   */
  async clearAndFillPhone(phone: string): Promise<void> {
    await this.phoneInput.click();
    // 点击手机号清除图标
    await this.page.locator('uni-view:nth-child(3) > .nut-cell__value > .nut-form-item__body__slots > .nut-input > .nut-input__clear > .nut-input__clear-icon').click();
    await this.phoneInput.fill(phone);
  }

  /**
   * 填写身份证号
   * @param idCard 身份证号
   */
  async fillIdCard(idCard: string): Promise<void> {
    await this.idCardInput.click();
    await this.idCardInput.fill(idCard);
  }

  /**
   * 清除并填写身份证号
   * @param idCard 身份证号
   */
  async clearAndFillIdCard(idCard: string): Promise<void> {
    await this.idCardInput.click();
    // 点击身份证清除图标
    await this.page.locator('uni-view:nth-child(4) > .nut-cell__value > .nut-form-item__body__slots > .nut-input > .nut-input__clear > .nut-input__clear-icon').click();
    await this.idCardInput.fill(idCard);
  }

  /**
   * 选择客户分组（选择"普通客户"）
   */
  async selectCustomerGroup(): Promise<void> {
    // 点击客户分组选择器
    await this.customerGroupPicker.click();
    
    // 等待弹窗出现
    await this.page.waitForTimeout(500);
    
    // 选择"普通客户"（使用 nth(4) 和 force: true 绕过遮罩层）
    await this.page.locator('uni-view').filter({ hasText: /^普通客户$/ }).nth(4).click({ force: true });
  }

  /**
   * 开启赊欠额度开关
   */
  async enableCreditLimit(): Promise<void> {
    await this.creditLimitSwitch.click();
  }

  /**
   * 填写赊欠额度
   * @param amount 赊欠额度金额
   */
  async fillCreditLimit(amount: string): Promise<void> {
    await this.creditLimitInput.click();
    await this.creditLimitInput.fill(amount);
  }

  /**
   * 填写车牌号
   * @param licensePlate 车牌号（如：渝ZY0706）
   */
  async fillLicensePlate(licensePlate: string): Promise<void> {
    // 点击车牌号输入框 - nth-child(11)，开启赊欠额度后位置
    const licensePlateInput = this.page.locator('uni-view:nth-child(11) > .nut-cell__value > .nut-form-item__body__slots > .input-wrapper > .flex-input > .nut-input > .nut-input__value > .nut-input__mask');
    
    // 调用基类的通用方法
    await super.fillLicensePlate(licensePlate, licensePlateInput);
  }

  /**
   * 选择省市区
   * @param province 省份（如：山西省）
   * @param city 城市（如：长治市）
   * @param district 区县（如：潞城区）
   */
  async selectRegion(province: string, city: string, district: string): Promise<void> {
    // 点击省市区选择器 - nth-child(12)，开启赊欠额度后位置
    await this.page.locator('uni-view:nth-child(12) > .nut-cell__value > .nut-form-item__body__slots > .input-wrapper > .flex-input > .nut-input > .nut-input__value > .nut-input__mask').click();
    
    // 等待弹窗出现
    await this.page.waitForTimeout(500);
    
    // 选择省份
    await this.page.getByText(province).click();
    
    // 选择城市
    await this.page.getByText(city).click();
    
    // 选择区县
    await this.page.getByText(district).click();
    
    // 确认选择
    await this.page.getByText('确认选择').click();
  }

  /**
   * 填写详细地址
   * @param address 详细地址
   */
  async fillDetailedAddress(address: string): Promise<void> {
    // 点击详细地址输入框 - nth-child(13)，开启赊欠额度后位置
    await this.page.locator('uni-view:nth-child(13) > .nut-cell__value > .nut-form-item__body__slots > .nut-input > .nut-input__value > .nut-input__input > .uni-input-wrapper > .uni-input-input').click();
    // 填写详细地址
    await this.page.locator('uni-view:nth-child(13) > .nut-cell__value > .nut-form-item__body__slots > .nut-input > .nut-input__value > .nut-input__input > .uni-input-wrapper > .uni-input-input').fill(address);
  }

  /**
   * 上传客户图片
   * @param imagePath 图片文件路径（相对于项目根目录）
   */
  async uploadCustomerImage(imagePath: string): Promise<void> {
    // 调用基类的通用方法
    await super.uploadImage(imagePath);
  }

  /**
   * 创建新客户 - 完整流程
   * @param customerInfo 客户信息
   * @param options 可选配置
   */
  async createCustomer(
    customerInfo: {
      name: string;
      phone: string;
      idCard: string;
      detailedAddress?: string;
    },
    options?: {
      creditLimit?: string;
      licensePlate?: string;
      province?: string;
      city?: string;
      district?: string;
      imagePath?: string;
    }
  ): Promise<void> {
    // 打开客户管理
    await this.openCustomerManagement();
    
    // 点击新增客户
    await this.clickAddCustomer();
    
    // 填写客户名称
    await this.fillCustomerName(customerInfo.name);
    
    // 填写手机号
    await this.fillPhone(customerInfo.phone);
    
    // 填写身份证
    await this.fillIdCard(customerInfo.idCard);
    
    // 选择客户分组（默认第一个）
    await this.selectCustomerGroup();
    
    // 如果有赊欠额度配置
    if (options?.creditLimit) {
      await this.enableCreditLimit();
      await this.fillCreditLimit(options.creditLimit);
    }
    
    // 如果有车牌号配置
    if (options?.licensePlate) {
      await this.fillLicensePlate(options.licensePlate);
    }
    
    // 如果有省市区配置
    if (options?.province && options?.city && options?.district) {
      await this.selectRegion(options.province, options.city, options.district);
    }
    
    // 如果有详细地址
    if (customerInfo.detailedAddress) {
      await this.fillDetailedAddress(customerInfo.detailedAddress);
    }
    
    // 如果有图片上传
    if (options?.imagePath) {
      await this.uploadCustomerImage(options.imagePath);
    }
    
    // 保存客户
    await this.saveButton.click();
    
    // 等待保存完成
    await this.page.waitForLoadState('networkidle', { timeout: 30000 });
  }

  /**
   * 验证客户是否创建成功
   * @param customerName 客户名称
   */
  async verifyCustomerCreated(customerName: string): Promise<boolean> {
    try {
      await this.page.waitForSelector(selectors.customerInList(customerName), { timeout: 10000 });
      return true;
    } catch {
      return false;
    }
  }

  // ==================== 修改/删除客户相关方法 ====================

  /**
   * 搜索客户
   * @param customerName 客户名称
   */
  async searchCustomer(customerName: string): Promise<void> {
    // 点击搜索框区域（使用 force: true 绕过遮罩层）
    await this.page.locator('uni-view').filter({ hasText: /^客户名称\/手机号$/ }).nth(2).click({ force: true });
    // 在输入框中填写客户名称
    await this.page.getByRole('textbox').fill(customerName);
    await this.page.waitForTimeout(1000);
  }

  /**
   * 点击客户进入详情页面
   * @param customerName 客户名称
   */
  async clickCustomerItem(customerName: string): Promise<void> {
    await this.page.getByText(customerName).first().click();
    await this.page.waitForLoadState('networkidle', { timeout: 30000 });
  }

  /**
   * 点击编辑按钮
   */
  async clickEditButton(): Promise<void> {
    await this.page.getByText('修改客户').click();
    await this.page.waitForLoadState('networkidle', { timeout: 30000 });
  }

  /**
   * 点击删除按钮
   */
  async clickDeleteButton(): Promise<void> {
    await this.page.getByText('删除客户').click();
    await this.page.waitForTimeout(500);
  }

  /**
   * 确认删除
   */
  async confirmDelete(): Promise<void> {
    await this.page.getByText('确定', { exact: true }).click();
    await this.page.waitForLoadState('networkidle', { timeout: 30000 });
  }

  /**
   * 修改客户 - 复用新增方法
   * @param originalName 原客户名称（用于搜索）
   * @param customerInfo 新的客户信息
   * @param options 可选配置
   */
  async updateCustomer(
    originalName: string,
    customerInfo: {
      name: string;
      phone: string;
      idCard: string;
      detailedAddress?: string;
    },
    options?: {
      creditLimit?: string;
      licensePlate?: string;
      province?: string;
      city?: string;
      district?: string;
      imagePath?: string;
    }
  ): Promise<void> {
    // 先返回首页确保页面状态干净（避免遮罩层阻挡）
    await this.gotoHome();
    // 打开客户管理并搜索
    await this.openCustomerManagement();
    await this.searchCustomer(originalName);
    await this.clickCustomerItem(originalName);
    await this.clickEditButton();
    
    // 使用清除并填写方法修改信息
    await this.clearAndFillCustomerName(customerInfo.name);
    await this.clearAndFillPhone(customerInfo.phone);
    await this.clearAndFillIdCard(customerInfo.idCard);
    
    if (options?.creditLimit) {
      // 清除并填写赊欠额度（使用 force: true 绕过遮罩层）
      await this.creditLimitInput.click({ force: true });
      await this.page.locator('uni-view:nth-child(8) > .nut-cell__value > .nut-form-item__body__slots > .nut-input > .nut-input__clear > .nut-input__clear-icon').click({ force: true });
      await this.creditLimitInput.fill(options.creditLimit);
    }
    
    if (options?.licensePlate) {
      await this.fillLicensePlate(options.licensePlate);
    }
    
    if (options?.province && options?.city && options?.district) {
      await this.selectRegion(options.province, options.city, options.district);
    }
    
    if (customerInfo.detailedAddress) {
      await this.fillDetailedAddress(customerInfo.detailedAddress);
    }
    
    if (options?.imagePath) {
      await this.uploadCustomerImage(options.imagePath);
    }
    
    await this.saveButton.click();
    await this.page.waitForLoadState('networkidle', { timeout: 30000 });
  }

  /**
   * 删除客户
   * @param customerName 客户名称
   */
  async deleteCustomer(customerName: string): Promise<void> {
    // 先返回首页确保页面状态干净（避免遮罩层阻挡）
    await this.gotoHome();
    await this.openCustomerManagement();
    await this.searchCustomer(customerName);
    await this.clickCustomerItem(customerName);
    await this.clickDeleteButton();
    await this.confirmDelete();
  }

  /**
   * 验证客户是否已被删除
   * @param customerName 客户名称
   */
  async verifyCustomerDeleted(customerName: string): Promise<boolean> {
    await this.gotoHome();
    await this.openCustomerManagement();
    await this.searchCustomer(customerName);
    
    const count = await this.page.getByText(customerName).count();
    return count === 0;
  }

  // ==================== 录入欠款相关方法 ====================

  /**
   * 点击录入欠款按钮
   */
  async clickRecordDebt(): Promise<void> {
    await this.page.getByText('录入欠款').click();
    await this.page.waitForTimeout(500);
  }

  /**
   * 选择欠款类型
   * @param typeIndex 类型索引（默认选择第三个，索引为2）
   */
  async selectDebtType(typeIndex: number = 2): Promise<void> {
    await this.page.locator('uni-view:nth-child(4) > .nut-cell__value > .nut-form-item__body__slots > .nut-input > .nut-input__value > .nut-input__mask').click();
    await this.page.locator('uni-view').filter({ hasText: /^2$/ }).nth(typeIndex).click();
  }

  /**
   * 填写欠款金额
   * @param amount 欠款金额
   */
  async fillDebtAmount(amount: string): Promise<void> {
    await this.page.getByRole('spinbutton').click();
    await this.page.getByRole('spinbutton').fill(amount);
  }

  /**
   * 填写欠款备注
   * @param remark 备注
   */
  async fillDebtRemark(remark: string): Promise<void> {
    await this.page.getByRole('textbox').nth(4).click();
    await this.page.getByRole('textbox').nth(4).fill(remark);
  }

  /**
   * 保存欠款
   */
  async saveDebt(): Promise<void> {
    await this.page.getByText('保存', { exact: true }).click();
    await this.page.waitForLoadState('networkidle', { timeout: 30000 });
  }

  /**
   * 录入欠款 - 完整流程
   * @param customerName 客户名称
   * @param amount 欠款金额
   * @param options 可选配置
   */
  async recordDebt(
    customerName: string,
    amount: string,
    options?: {
      typeIndex?: number;    // 欠款类型索引
      remark?: string;       // 备注
      imagePath?: string;    // 图片路径
    }
  ): Promise<void> {
    // 先返回首页确保页面状态干净（避免遮罩层阻挡）
    await this.gotoHome();
    // 打开客户管理并搜索
    await this.openCustomerManagement();
    await this.searchCustomer(customerName);
    await this.clickCustomerItem(customerName);
    
    // 点击录入欠款
    await this.clickRecordDebt();
    
    // 选择欠款类型
    if (options?.typeIndex !== undefined) {
      await this.selectDebtType(options.typeIndex);
    }
    
    // 填写欠款金额
    await this.fillDebtAmount(amount);
    
    // 填写备注
    if (options?.remark) {
      await this.fillDebtRemark(options.remark);
    }
    
    // 上传图片 - 使用基类封装的方法
    if (options?.imagePath) {
      await this.uploadCustomerImage(options.imagePath);
    }
    
    // 保存
    await this.saveDebt();
  }

  /**
   * 验证欠款是否录入成功
   * @param amount 欠款金额
   */
  async verifyDebtRecorded(amount: string): Promise<boolean> {
    try {
      await this.page.getByText(`欠款：${amount}.00元`).waitFor({ timeout: 10000 });
      return true;
    } catch {
      return false;
    }
  }
}