巧用属性选择器，简化puppeteer前端自动化测试代码开发

关于使用puppeteer搭建自动化测试工程的方法，可以参考入门指南：使用Puppeteer进行前端自动化测试。本文意在分享编写测试代码时的一个简化技巧。

适用场景

适用于表单类操作较多、且操作模式较为统一的B端系统页面。比如进行增、删、改、查等简单交互。

例如antd组件中的表单。如果在自动化测试中模仿表单操作，一般习惯使用id选择器或类选择器。例如：

    await page.waitForTimeout(1000);
    const Username = await page.waitForSelector("#Username");
    await Username.type("2023");
	const Password = await page.waitForSelector("#Password");
    await Password.type("2023");
    
    const submit = await page.waitForSelector(
      ".ant-form .ant-form-item .ant-btn-primary"
    ); //查询按钮
    submit.click();

每一个页面都要单独去找各个元素所在的层级位置、id与类名。如果多个页面功能操作重复性的部分很多，我们也不得不一遍遍重复书写类似代码，这个过程不仅是极为枯燥的，也给开发工作增加了许多负担。

改良：用属性选择器抽象出操作过程

既然很多B端的页面操作过程是一致的，只不过元素的id是不同的。那我们就可以选择抛弃独特的id选择器，替代成更加通用的属性选择器。通过在前端业务代码结构中增加具有特征的属性，来抽象出用户的行为、操作顺序，那么在自动化测试代码中就可以开发一套通用的测试代码，来适配多个不同的页面啦。

业务表单代码：
一个查询检索的表单：

<Form layout="inline" form={
   form}>
            <FormItem
                name='title'
                label='标题'
                test='queryForm-input'
            >
                <Input/>
            </FormItem>
            <FormItem
                name='type'
                label='类型'
                test='queryForm-select'
            >
                <Select
                >
                    {
   options}
                </Select>

            </FormItem>
            <FormItem
                name='startDate'
                label='开始日期'
                test='queryForm-datePicker'
            >
                <DatePicker
                    format="YYYY-MM-DD"
                />
            </FormItem>
            <Button test='queryForm-queryButton' onClick={
   handleSubmit}>
                    查询
            </Button>
</Form>

一个Modal弹窗的表单：