playwright/tests/pages/LongiLoginPage.js

const BasePage = require('./BasePage');

class LongiLoginPage extends BasePage {
    /**
     * 创建登录页面对象
     * @param {import('@playwright/test').Page} page Playwright页面对象
     */
    constructor(page) {
        super(page);
        this.initializeSelectors();
        this.initializeConfig();
    }

    /**
     * 初始化选择器
     * @private
     */
    initializeSelectors() {
        // 调用父类的选择器初始化
        super.initializeSelectors();
        
        // 添加或覆盖特定于 LongiLoginPage 的选择器
        Object.assign(this.selectors, {
            // 登录表单元素
            usernameInput: 'input[name="username"]',
            passwordInput: 'input[name="passWord"]',
            captchaInput: 'input[placeholder*="验证码"]',
            captchaImage: 'img[style*="width: 78px"]',
            loginButton: 'button.el-button--large.container-button',
            loginButtonByText: 'button:text("登录"):not(:text("SSO登录"))',
            loginButtonFirst: 'button:has-text("登录")',
            ssoLoginButton: 'button:has-text("SSO登录")'
        });
    }

    /**
     * 初始化配置
     * @private
     */
    initializeConfig() {
        // 调用父类的配置初始化
        super.initializeConfig();
        
        // 添加或覆盖特定于 LongiLoginPage 的配置
        Object.assign(this.config, {
            loginTimeout: 10000
        });
    }

    /**
     * 导航到登录页面
     */
    async navigateToLoginPage() {
        console.log('当前使用的 BASE_URL:', process.env.BASE_URL);
        await this.navigate(process.env.BASE_URL);
    }

    /**
     * 点击登录按钮
     * @returns {Promise<boolean>} 是否成功点击登录按钮
     */
    async clickLoginButton() {
        try {
            // 方法1: 使用更精确的选择器，指定包含特定类的按钮
            await this.click(this.selectors.loginButton);
            console.log('使用 container-button 类选择器成功点击登录按钮');
            await this.waitForPageLoad();
            return true;
        } catch (error) {
            console.log('第一种方法失败，尝试备用方法...');
            try {
                // 方法2: 使用精确文本匹配
                await this.safeClick(await this.page.locator(this.selectors.loginButtonByText), '登录按钮（精确文本匹配）');
                // console.log('使用精确文本匹配成功点击登录按钮');
                await this.waitForPageLoad();
                return true;
            } catch (secondError) {
                console.log('第二种方法也失败，尝试第三种方法...');
                try {
                    // 方法3: 使用first()选择第一个匹配的按钮
                    await this.safeClick(await this.page.locator(this.selectors.loginButtonFirst).first(), '登录按钮（first方法）');
                    // console.log('使用first()方法成功点击登录按钮');
                    await this.waitForPageLoad();
                    return true;
                } catch (thirdError) {
                    console.error('所有方法都失败，无法点击登录按钮', thirdError);
                    return false;
                }
            }
        }
    }

    /**
     * 检查登录是否成功
     * @returns {Promise<boolean>} 登录是否成功
     */
    async isLoginSuccessful() {
        // 登录成功后通常会重定向到其他页面
        const currentUrl = await this.getCurrentUrl();
        return currentUrl.includes('/dashboard');
    }

    /**
     * 输入用户名
     * @param {string} username 用户名
     */
    async enterUsername(username) {
        await this.fill(this.selectors.usernameInput, username);
    }

    /**
     * 输入密码
     * @param {string} password 密码
     */
    async enterPassword(password) {
        await this.fill(this.selectors.passwordInput, password);
    }

    /**
     * 输入验证码
     * @param {string} captcha 验证码
     */
    async enterCaptcha(captcha) {
        await this.fill(this.selectors.captchaInput, captcha);
    }

    /**
     * 获取验证码图片元素
     * @returns {Promise<import('@playwright/test').Locator>} 验证码图片元素
     */
    async getCaptchaImage() {
        return this.waitForElement(this.selectors.captchaImage);
    }

    /**
     * 执行登录操作
     * @param {string} username 用户名
     * @param {string} password 密码
     * @param {string} captcha 验证码
     * @returns {Promise<boolean>} 登录是否成功
     */
    async login(username, password, captcha) {
        try {
            await this.enterUsername(username);
            await this.enterPassword(password);
            await this.enterCaptcha(captcha);
            
            if (await this.clickLoginButton()) {
                return await this.isLoginSuccessful();
            }
            return false;
        } catch (error) {
            console.error('登录过程出错:', error.message);
            return false;
        }
    }
}

module.exports = LongiLoginPage;