javascript-Testcafe LocalStorage问题

大家!
我是testcafe的新手,我需要一些想要实现的帮助.

我有一个React网站,我在上面放置了一个Facebook登录名.通常,当您进入页面并单击“使用Facebook登录”时,会打开一个弹出窗口并正常输入您的凭据.之后,您将被重定向页面,令牌被保存在localStorage变量中,供页面稍后使用.

但是,当我运行登录过程测试时,testcafe而不是打开弹出窗口,而是在同一页面上打开Facebook表单,并且从不重定向到该页面.

另外,我尝试使用ClientFunction(以及Roles)在localstorage上设置一些虚拟令牌,但我的网站永远无法到达该令牌,因为testcafe似乎将此变量放在了称为Hammerhead的键上

因此,我的问题是,如何在测试中或手动输入此令牌,以便我的网站可以读取它并进行一些功能

到目前为止,这就是我所拥有的.

/* global test,fixture */
import { WelcomePage } from './pages/welcome-page'
import {ClientFunction,Role} from 'testcafe';

const welcomePage = new WelcomePage()

const setLocalStorageItem = ClientFunction((prop,value) => {
  localStorage.setItem(prop,value);
});

const facebookAccUser = Role(`https//mypage.net/`,async t => {
  await setLocalStorageItem('token','my-token');
},{ preserveUrl: true });

fixture`Check certain elements`.page(`https//mypage.net/`)
test('Check element is there',async (t) => {
  await t
    .navigateto(`https//mypage.net/`)
    .wait(4000)
    .useRole(facebookAccUser)
    .expect(cetainElementIfLoggedIn)
    .eql(certainValue)
    .wait(10000)
})

任何帮助将不胜感激

谢谢你的时间.

最佳答案
当前,testcafe不支持多个浏览器窗口.因此,无法通过Facebook弹出表单登录.
但是,有一种解决方法.请参考以下线程https://github.com/DevExpress/testcafe-hammerhead/issues/1428.

我的工作测试如下所示:

import { Selector,ClientFunction } from 'testcafe';

const patchAuth = ClientFunction(() => {
    window['op' + 'en'] = function (url) {
        var iframe = document.createElement('iframe');

        iframe.style.position = 'fixed';
        iframe.style.left = '200px';
        iframe.style.top = '150px';
        iframe.style.width = '400px';
        iframe.style.height = '300px';
        iframe.style['z-index'] = '99999999';
        iframe.src = url;
        iframe.id = 'auth-iframe';

        document.body.appendChild(iframe);
    };
});

fixture `fixture`
    .page `https://www.soudfa.com/signup`;

test('test',async t => {
    await patchAuth();

    await t
        .click('button.facebook')
        .switchToIframe('#auth-iframe')
        .typeText('#email','****')
        .typeText('#pass','****')
        .click('#u_0_0')
        .wait(30e3);
});

请记住,需要使用testcafe-hammerhead模块中的x-frame-options进行操作.

另外,我想提及的是,在多个浏览器窗口中进行测试是我们的优先任务之一,它是TestCafe Roadmap的一部分

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


什么是深拷贝与浅拷贝?深拷贝与浅拷贝是js中处理对象或数据复制操作的两种方式。‌在聊深浅拷贝之前咱得了解一下js中的两种数据类型:
前言 今天复习了一些前端算法题,写到一两道比较有意思的题:重建二叉树、反向输出链表每个节点 题目 重建二叉树: 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树。假设输入的前序遍历和中序遍历的结果中都不含重复的数字。例如输入前序遍历序列 {1,2,4,7,3,5,6,8} 和中序遍历序列 {
最近在看回JavaScript的面试题,this 指向问题是入坑前端必须了解的知识点,现在迎来了ES6+的时代,因为箭头函数的出现,所以感觉有必要对 this 问题梳理一下,所以刚好总结一下JavaScript中this指向的问题。
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)