首页 > 解决方案 > 用玩笑测试动态页面

问题描述

我目前正在尝试使用 jest 来测试网页。该页面是一个动态页面,ejs文件如下:

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <a class="navbar-brand" href="#">Blogster</a>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a class="nav-link" href="/auth/google">LogOut</a>

            </li>
            <li class="nav-item active">
                <a id = "mainprofile-tag" class="nav-link" href="/auth/google"><%=profile%></a>            
            </li>
        </ul>
</nav>
<div id= "Main-blog">
    <h3 class = "Blog-title"><%=blogTitle ? blogTitle: '' %></h3>
    <div><%=blogContent ? blogContent: ''%></div>
    <hr>
</div>

每当我尝试运行测试套件时,我都会收到以下铬错误

ReferenceError: /Users/ahmedsengab/Desktop/dev/courses/nodeCourse/advanced/main/views/profile.ejs:20
18|                 </li>
19|                 <li class="nav-item active">
>> 20|                     <a id = "mainprofile-tag" class="nav-link" href="/auth/google"><%=profile%></a>
21|                     
22|                 </li>
23|             </ul>

我的问题是如何使用 jest 来测试带有 ejs 和 node 的动态内容

当前的笑话代码

const puppeteer = require('puppeteer');
const sessionFactory = require('./factories/sessionFactory');
const userFactory = require('./factories/userFactory');
const Page = require('./helpers/page'); 
let page;



beforeEach( async () => {
   page = await Page.build();
   await page.goto('http://localhost:3000');

})
test('when signed in, show profile button', async () => {
  await page.login();

  const text = await page.getContentsOf('#mainprofile-tag')

})

定义 login() 和 build 函数的页面代码

const puppeteer = require('puppeteer');
const sessionFactory = require('../factories/sessionFactory');
const userFactory = require('../factories/userFactory');

class CustomPage {
static async build() {
    const browser = await puppeteer.launch({
        headless:true,
        args: ['--no-sandbox']
    });
    const page = await browser.newPage();
    const customPage = new CustomPage(page);

    return new Proxy(customPage,{
        get:function(target,property){
            return customPage[property] || browser[property] || 
page[property]
        }
    })
}
constructor(page,browser){
    this.page = page;
    this.browser = browser;
}
close(){
    this.browser.close();
}
async login(){
    const User = await userFactory();


    const {session,sig} = await sessionFactory(User)

    await this.page.setCookie({name:'express:sess',value:session});
    await this.page.setCookie({name:'express:sess.sig',value:sig});
    await this.page.goto('http://localhost:3000');
    /// Double check here ///
    //await this.page.waitFor('#mainpage-title');
}
async getContentsOf(selector){
    return this.page.$eval(selector, el => el.innerHTML);
}
}

module.exports = CustomPage;

标签: jestjsejspuppeteer

解决方案


推荐阅读