const puppeteer = require('puppeteer')
let browser
let page
const screen = {
  width: 1920,
  height: 1080
}

beforeAll(async() => {
  browser = await puppeteer.launch({
    args: ['--start-maximized'], // 浏览器窗口最大化
    headless: false, // 开启或关闭无头模式
    ignoreHTTPSErrors: true,
    slowMo: 50, // slow down by 50ms, 减慢运行的速度，更好的看清楚操作
    timeout: 15000,
    ignoreHTTPSErrors: true, // 若访问的是https页面，则忽略https错误
    devtools: false // 打开或关闭浏览器的开发者模式
  })
  page = await browser.newPage()
  page.setViewport({
    width: screen.width,
    height: screen.height // 当前屏幕的长和宽
  })
  await page.setJavaScriptEnabled(true)
})

afterAll(async() => {
  await browser.close()
})

test('1. 打开VOTE; 2. 登录测试; 3. 用户查询测试', async() => {
  // 声明是异步函数
  await page.goto('http://vote.uue.cn/admin/#/login', {
    waitUntil: 'networkidle2' // 等待网络状态为空闲的时候才继续执行
  })

  // 添加assertion，验证标题是否正确
  const pageTitle = await page.title()
  await expect(pageTitle).toMatch('视频投票')
  // 输入用户名
  const usernameInput = await page.waitForSelector('input[type="text"]')
  await usernameInput.click()
  await usernameInput.type('228228')
  // 输入错误的密码
  const passwordInput = await page.waitForSelector('input[type="password"]')
  await passwordInput.click()
  await passwordInput.type('errorpassword')
  // 点击'登陆'按钮
  const loginBtn = await page.waitForSelector('button')
  await loginBtn.click()
  // 判断是否弹出错误的提示框
  await page.waitForSelector('p.el-message__content')
  // 等待提示框出现
  const errInfo = await page.$eval('p.el-message__content', el => el.innerText)
  // 判断提示框内容
  await expect(errInfo).toMatch('用户密码错误')
  // 修改为正确的密码并重新登录
  await page.$eval('input[type="password"]', el => (el.value = '')) // 清空现有密码
  await passwordInput.click()
  await passwordInput.type('225225225')
  await loginBtn.click()
  // 判断是否成功登录
  await page.waitForSelector('.userinfo-inner')
  const userinfo = await page.$eval('.userinfo-inner', el => el.innerText)
  await expect(userinfo).toMatch('228228')
  // 点击用户菜单
  const menuSys = await page.waitForXPath('//div[@class="el-submenu__title"][contains (text(),"管理面板")]')
  menuSys.click()
  const menuUser = await page.waitForXPath('//li[@class="el-menu-item"][contains (text(),"用户")]')
  menuUser.click()
  // 在搜索框中搜索Peter
  const searchUser = await page.waitForXPath('//div[contains (@class,"toolbar")]/form//input[@placeholder="姓名"]')
  await searchUser.type('Peter')
  const searchBtn = await page.waitForXPath('//div[contains (@class,"toolbar")]/form//button')
  searchBtn.click()
  // 等待网络查询后遍历表格
  await page.waitFor(2000)
  const list = await page.$$eval('tr td.el-table_1_column_3', elements => {
    const ctn = elements.map(v => {
      return v.innerText.replace(/\s/g, '')
    })
    return ctn
  })
  // 判断是不是每个查询结果都包含Peter
  let matchCount = 0
  for (var i = 0; i < list.length; i++) {
    if (list[i].indexOf('Peter') !== -1) {
      matchCount++
    }
  }
  await expect(matchCount).toEqual(list.length)
  // 截图留存
  await page.screenshot({
    path: 'vote.png',
    type: 'png',
    fullPage: true
  })
}, 60000) // 设置timeout时间为60000 ms