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.locator('uni-button.execute-btn').filter({ hasText: '保存' });
  }

  /**
   * 导航到首页并等待加载
   */
  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);
    
    // 随机选择一个客户分组
    const items = this.page.locator('.zp-paging-container-content .default-item');
    const count = await items.count();
    const randomIndex = Math.floor(Math.random() * count);
    await items.nth(randomIndex).click({ force: true });
  }

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

  /**
   * 检查赊欠额度开关是否已开启
   * @returns 是否已开启
   */
  async isCreditLimitEnabled(): Promise<boolean> {
    // 检查开关的激活状态（nut-switch 组件在激活时会有 nut-switch--active 类）
    const switchElement = this.creditLimitSwitch;
    const className = await switchElement.getAttribute('class');
    return className?.includes('nut-switch--active') ?? false;
  }

  /**
   * 确保赊欠额度开关已开启，如果未开启则点击开启
   */
  async ensureCreditLimitEnabled(): Promise<void> {
    const isEnabled = await this.isCreditLimitEnabled();
    if (!isEnabled) {
      await this.enableCreditLimit();
    }
  }

  /**
   * 填写赊欠额度
   * @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 selectCustomerRegion(province: string, city: string, district: string): Promise<void> {
    // 点击省市区选择器 - nth-child(12)，开启赊欠额度后位置
    const regionPickerLocator = 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');
    
    // 调用基类的通用方法
    await super.selectRegion(regionPickerLocator, province, city, district);
  }

  /**
   * 填写详细地址
   * @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.selectCustomerRegion(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.gotoHome();
      await this.openCustomerManagement();
      await this.page.waitForLoadState('networkidle');
      await this.page.waitForTimeout(500);
      
      // 清空搜索框（点击清除图标）
      const clearBtn = this.page.locator('.nut-icon-circle-close');
      if (await clearBtn.isVisible()) {
        await clearBtn.click();
        await this.page.waitForTimeout(500);
      }
      
      // 搜索客户
      await this.searchCustomer(customerName);
      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 });
    // 在输入框中填写客户名称
    const input = this.page.locator('uni-input').filter({ hasText: '客户名称/手机号' }).getByRole('textbox');
    await input.fill(customerName);
    // 等待搜索结果出现
    await this.page.waitForTimeout(1500);
    // 按回车键确认搜索
    await input.press('Enter');
    await this.page.waitForTimeout(1000);
  }

  /**
   * 点击客户进入详情页面
   * @param customerName 客户名称
   */
  async clickCustomerItem(customerName: string): Promise<void> {
    // 使用Playwright的locator语法查找搜索结果列表中的客户项
    const customerItem = this.page.locator('uni-view').filter({ hasText: customerName }).first();
    await customerItem.waitFor({ state: 'visible', timeout: 10000 });
    await customerItem.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) {
      // 先确保赊欠额度开关已开启
      await this.ensureCreditLimitEnabled();
      // 直接填写赊欠额度（fill会自动清除）
      await this.creditLimitInput.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.selectCustomerRegion(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();
    // 点击确定后，页面会返回到列表页，等待加载完成
    await this.page.waitForLoadState('networkidle', { timeout: 30000 });
    await this.page.waitForTimeout(1000);
  }

  /**
   * 验证客户是否已被删除
   * @param customerName 客户名称
   */
  async verifyCustomerDeleted(customerName: string): Promise<boolean> {
    await this.gotoHome();
    await this.openCustomerManagement();
    await this.page.waitForLoadState('networkidle');
    await this.page.waitForTimeout(500);
    
    // 清空搜索框（点击清除图标）
    const clearBtn = this.page.locator('.nut-icon-circle-close');
    if (await clearBtn.isVisible()) {
      await clearBtn.click();
      await this.page.waitForTimeout(500);
    }
    
    await this.searchCustomer(customerName);
    await this.page.waitForTimeout(1000);
    
    // 在客户列表中查找（只在 .nut-cell-group 或列表容器中查找）
    const listItem = this.page.locator('.nut-cell-group__wrapper').locator('.nut-cell', { hasText: customerName });
    const count = await listItem.count();
    console.log(`查找 "${customerName}" 在列表中找到 ${count} 个匹配`);
    return count === 0;
  }

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

  /**
   * 录入欠款 - 完整流程（基于录制脚本重写）
   * @param customerName 客户名称
   * @param amount 欠款金额
   * @param options 可选配置
   */
  async recordDebt(
    customerName: string,
    amount: string,
    options?: {
      debtType?: string;    // 欠款类型（如 '15'）
      remark?: string;       // 备注
      imagePath?: string;    // 图片路径
    }
  ): Promise<void> {
    // 先返回首页确保页面状态干净
    await this.gotoHome();
    // 打开客户管理并搜索
    await this.openCustomerManagement();
    await this.searchCustomer(customerName);
    await this.clickCustomerItem(customerName);
    
    // 点击录入欠款
    await this.page.getByText('录入欠款').click();
    await this.page.waitForTimeout(500);
    
    // 选择欠款类型 - 点击下拉框
    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();
    // 选择类型（默认使用 '15'）
    const debtType = options?.debtType || '15';
    await this.page.getByText(debtType, { exact: true }).click();
    
    // 填写欠款金额
    await this.page.getByRole('spinbutton').click();
    await this.page.getByRole('spinbutton').fill(amount);
    
    // 填写备注
    if (options?.remark) {
      await this.page.getByRole('textbox').nth(4).click();
      await this.page.getByRole('textbox').nth(4).fill(options.remark);
    }
    
    // 上传图片（暂时跳过，如果需要可以后续启用）
    // if (options?.imagePath) {
    //   // 使用基类的uploadImage方法上传图片
    //   await this.uploadImage(options.imagePath);
    // }
    
    // 点击保存按钮
    await this.page.getByText('保存', { exact: true }).click();
    await this.page.waitForTimeout(2000);
  }

  /**
   * 验证欠款是否录入成功
   * 检查客户详情页的"当前欠款"字段是否显示正确金额
   * @param expectedAmount 期望的欠款金额
   */
  async verifyDebtRecorded(expectedAmount: string): Promise<boolean> {
    try {
      // 等待页面稳定
      await this.page.waitForTimeout(2000);
      await this.page.waitForLoadState('networkidle');
      
      // 显示格式是"欠款：{金额}.00元"，其中金额是原始输入值
      const displayAmount = parseFloat(expectedAmount).toFixed(2);
      const searchText = `欠款：${displayAmount}元`;
      
      console.log(`查找欠款文本: ${searchText}`);
      
      // 直接查找包含"欠款：{金额}元"格式的元素
      const debtElement = this.page.getByText(searchText);
      const isVisible = await debtElement.isVisible({ timeout: 5000 }).catch(() => false);
      
      if (isVisible) {
        console.log(`验证成功：找到欠款 ${searchText}`);
        return true;
      }
      
      // 备用方案：查找包含"欠款："的元素
      const debtWithLabel = this.page.locator('uni-view').filter({ hasText: /^欠款：/ });
      const count = await debtWithLabel.count();
      console.log(`找到 ${count} 个包含"欠款："的元素`);
      
      if (count > 0) {
        const text = await debtWithLabel.first().textContent();
        console.log(`欠款文本内容: ${text}`);
        if (text && text.includes(displayAmount)) {
          return true;
        }
      }
      
      console.log(`验证失败：未找到金额 ${expectedAmount}`);
      return false;
    } catch (error) {
      console.log('验证欠款失败:', error);
      return false;
    }
  }
}