「自动化测试」playwright 前端自动化——网络请求，用户鉴权的封装

一 、网络请求的封装

class RequestCommon {
	readonly request: APIRequestContext;
    readonly browser: Browser;

    constructor (request: APIRequestContext, browser: Browser) {
        this.request = request;
        this.browser = browser;
    }

    /**
     * 获取当前浏览器上下文 cookies
     * @returns cookies
     */
    public async getCookies (): Promise<string> {
        const browserContext = await this.browser.newContext();
        return (await browserContext.storageState()).cookies;
    }

    /**
     * post 请求
     * @returns 返回 APIResponse
     */
    public async post (url: string, options?: PostOptions): Promise<APIResponse> {
        const csrfToken = await this.getCsrfToken();
        return this.request.post(`${baseUrl.default}${url}`, {
            ignoreHTTPSErrors: true,
            ...options,
            headers: {
                'content-type': 'application/json',
                ...options?.headers
            }
        });
    }
}

封装一个类通过传入的 fixtures 控制，确保发送请求的request，和browser都是当前页面下的，以避免对于多浏览器跑不同用户场景下的cookies不同导致权限不同

使用方法：

test('验证导出告警成功', async ({page, request, browser}) => {
    const requestCommonInstance = new RequestCommon(request, browser);
    const res = await requestCommonInstance.post('xxxUrl', { data })
}

优化ts类型约束及提示，通过自定义泛型工具获取函数第二个参数类型

/**
 * 获取函数第二个参数类型
 */
export type GetSecondArgs<T> = T extends (_: any, arg: infer R) => any ? R : any;
// post请求配置参数 获取APIRequestContext里的post函数类型的第二个配置参数
type PostOptions = GetSecondArgs<APIRequestContext['post']>;

二、用户鉴权相关：

第一步

const config: PlaywrightTestConfig = {
    /**
     *  执行用例前会触发的一段脚本
     *  在里面会走一遍admin登录，并把cookie抓下来生成一个文件放到项目根目录下
     *  后续用例可以读取这个文件来做登录鉴权
     */
    globalSetup: require.resolve('./global-setup/index.ts')
}

第二步

在当前目录global-setup/index.ts文件中

import { chromium } from '@playwright/test';
import { LoginPageModel } from '../modules/login/models';

export default async function globalSetup () {
	// 不打开浏览器走一遍
    const browser = await chromium.launch({
        headless: true
    });
    // 忽略https不安全报错
    const page = await browser.newPage({
        ignoreHTTPSErrors: true
    });

    const loginInstance = new LoginPageModel(page);
    await loginInstance.gotoLogin();

    await loginInstance.login();
    await loginInstance.assertLoginSuccess();
	
	// 走完一遍登录流程后保存状态到adminStorageState.json文件中

    // Save signed-in state to 'adminStorageState.json'.
    await page.context().storageState({ path: 'adminStorageState.json' });

    await browser.close();
}

第三步

在页面中使用即可做到保存用户状态

import { test } from '@playwright/test';
test.use({ storageState: 'adminStorageState.json' });