Puppeteer之校验测试结果

上篇博客讲解了如何定位和操作页面元素，此次课程将学习如何对执行结果进行校验，下面列举了常见的校验页面内容场景，此篇博客会演示在使用puppeteer时如何完成这些校验场景。

使用puppeteeer时，如果要获取页面元素的值或者属性需要调用page|elementHandle.$eval(selector,el=>{return el.xxx})。接下来就看看如何完成页面内容校验，同样，执行“npm run validate-element”即可运行下面的案例。

describe("get element info to validate ", () => {
    it("validate element status", async() => {
        await page.goto('https://devexpress.github.io/testcafe/example/');

        await expect(page).not.toMatchElement('#submit123');
        // 校验页面上不存在id=‘submit123’的element

        await expect(page).toMatchElement('#submit-button');
        // 校验页面上存在id=‘submit-button’的element

        const radioCount = await page.$$eval('label input[type="radio"]',el=>{return el.length});
        expect(radioCount).toEqual(3);
        //调用page.$$eval('selector',el=>{return el.xxx})获取符合条件的页面元素个数，并进行校验，这里判断页面上存在3个单选按钮

        await expect(page).toMatchElement('#submit-button', {text:'Submit'});
        // 校验页面上存在id=‘submit-button’且innerText=“Submit”的element
        //校验页面是否存在某个页面元素长用于判断不该显示某些按钮菜单，是否确实不存在

        expect(await page.$eval('#submit-button', el => {return el.getAttribute('disabled')})).toEqual('disabled');
        //校验button是不可点击状态，这里是通过获取属性名称等于disable的属性，并判断属性值等于disable实现的

        await expect(page).toFill('#developer-name','abc');
        expect(await page.$eval('#submit-button', el => {return el.getAttribute('disabled')})).toBeFalsy();
       //输入内容后，button从不可点击状态变为可点击状态，这里是通过校验button不存在disable这个属性实现的

        expect(await page.$eval('#windows',el=> {return el.checked})).toBeFalsy();
        //校验单选按钮是未选择状态

        await expect(page).toClick('#windows');
       //通过点击操作，选中单选按钮

        expect(await page.$eval('#windows',el=> {return el.checked})).toBeTruthy();
       //校验单选按钮是选中状态 

        expect(await page.$eval('#main-form #remote-testing',el=> {return el.checked})).toBeFalsy();
        await expect(page).toClick('#main-form #remote-testing');
        expect(await page.$eval('#main-form #remote-testing',el=> {return el.checked})).toBeTruthy();
        //多选按钮的操作和单选按钮一致

        await expect(page).toMatch('Example');
        //校验页面存在”Example“文字

        await expect(page).toMatchElement('h1',{text:'Example'})
       //校验存在”Example“文字的另外一种写法，这里也可以理解成校验页面存在h1这个页面元素，且该元素的innertText等于Example

       const innerText= await page.$eval('h1',el=> {return el.innerText});
        await expect(innerText).toEqual('Example');
        await expect(innerText).toContain('ample');
      //校验场景的另外一种写法，先获取需要校验的内容innerText，然后调用expect提供的方法进行校验，expect还提供了很多其他校验，大家可以自行练习   
    })
});

 上面演示了如何验证页面元素的个数、状态是否正确；innerText值、属性值是否正确，在校验的过程中都是直接调用page对象获取页面元素的值、状态进行校验。实际使用中，除用page对象外，还可以使用elementHandle对象，下面案例是通过elementHandle对象调用toMatch方法校验页面是否存在某个文案信息，具体代码如下所示

   it('elementHandle validation',async()=> {
        await page.goto('https://devexpress.github.io/testcafe/example/');
        const elementHandle =await page.$('#tried-section label');
        //page.$('')获取elementHandle

        await expect(elementHandler).toMatch('I have tried TestCafe');  
        //page对外提供的大部分方法，都可以用在elementHandle上，例如，这里用toMatch验证包含的内容是否正确
    })

除上面选择和匹配页面元素外，实际使用中还可以用正则表达是进行匹配。

    it('validation with containText',async()=> {
        await page.goto('https://devexpress.github.io/testcafe/example/');
        const elementHandle =await page.$('#tried-section label');
        await expect(elementHandle).toMatch('I have tried TestCafe');
        await expect(elementHandle).toMatch(/.*TestCafe.*/)
        //校验的时候也可以用正则表达式，这里验证查找的元素的innerText包含“TestCafe”字符串
    })

上面讲解的都是调用puppeteer直接提供的api获取内容并进行校验，当使用document定位元素时，如何获取元素信息进行验证呢？下面案例演示了调用document.querySelector()定位页面element时，获取element的innerText并进行校验，具体代码如下所示

    it("get value with document querySelector", async () => {
        await page.goto('https://angular.realworld.io/');
        await page.waitForSelector('app-layout-header li a[href="/login"]');
        const value = await page.evaluate(() => {
            return document.querySelector('app-layout-header li a[href="/login"]').innerText
            //调用document.querySelector查询页面元素，获取该元素的innerText并返回
        });
        await expect(value).toEqual('Sign in');
        //校验返回的内容是否正确

        await expect(value).toContain('Sign')
        //如果只想校验部分内容，可以调用toContain()方法

          const length=await page.evaluate(()=> {
            return document.querySelectorAll('app-layout-header li a[href="/login"]').length
            //获取查找到的页面元素个数
        });
        await expect(length).toEqual(1);
    });

除上面的场景外，如果要获取定位的elementList的信息，如何实现呢？下面案例演示了通过page$$(selector)获取elementList，然后返回elementList信息的过程。

 it("get element list value", async()=> {
        await  page.goto('https://news.ycombinator.com/news');
        const stories = await page.$$eval('a.storylink', anchors => { return anchors.map(anchor => anchor.textContent).slice(0, 10) });
        console.log(stories)
    });

最后，我们再看看对于隐藏的页面元素如何进行校验，例如，如下页面，当点击“Hide Menu“时上面的菜单隐藏，当点击“Show Menu”时上面的的菜单显示。

对于上面的场景，如果还是通过调用toMatchElement()的方式校验菜单元素存在会失败，因为element还在页面上，只是被隐藏了。那么如何校验菜单确实被隐藏了呢？请看下面的代码。同样，执行“validate-hidden-element”即可运行下面的案例。

describe("hidden element demo", () => {
    it("get hidden element value", async () => {
        await page.goto("https://www.jquery-az.com/css/demo.php?ex=123.0_4");
        //打开被测页面

        await expect(page).toMatchElement('li a', {text: 'Home'});
        //调用toMatchElement校验存在“Home”菜单

        await expect(page).toClick('#menu_div');
        //点击所有菜单的父元素<div id='menu_div'>,此时是可点击的，因为该元素显示在页面上

        await expect(page).toClick('p a', {text: 'Hide Menu'});
        //点击“Hide Menu”按钮隐藏菜单

        await expect(page).toMatchElement('li a', {text: 'Home'});
        //此时，页面上已经看不到任何菜单了，但调用toMatchElement还能获取到“Home”菜单元素

        expect(await page.$eval('#menu_div', el => {
            return el.getAttribute('style')
        })).toContain('display: none');
        //获取所有菜单的父元素<div id='menu_div'>的属性，因为是通过style属性控制菜单的显示，当style等于display: none时则不显示菜单

        // await expect(page).toClick('#menu_div');
        // 这行代码在脚本里面是被注释掉的，此时如果再尝试点击<div id='menu_div'>元素，会报错，因为点击操作前会检查，元素必须可见才允许点击
    
        await expect(page).toClick('p a', {text: 'Show Menu'});
        // 点击“Show Menu”按钮，显示所有的菜单

        expect(await page.$eval('#menu_div', el => {
            return el.getAttribute('style')
        })).toContain('display: initial');
       //获取所有菜单的父元素<div id='menu_div'>的属性，因为是通过style属性控制菜单的显示，当style等于display: initial时则显示菜单
    })
});

 可以看到对于隐藏的页面元素，判断是否真正隐藏很简单，找到控制显示的元素属性，获取属性值进行判断即可。