Testcafe LocalStorage 的问题答案

【问题标题】：Problems with Testcafe LocalStorageTestcafe LocalStorage 的问题
【发布时间】：2019-07-31 13:50:37
【问题描述】：

大家！我是 TestCafe 的新手，我需要一些帮助来完成我想要实现的目标。

我有一个 React 网站，我在其中放置了 Facebook 登录信息。通常，当您进入页面并单击Login with facebook 时，会打开一个弹出窗口并正常输入您的凭据。之后，您将被重定向到页面，并且令牌保存在 localStorage 变量中，以供页面稍后查阅。

但是，当我为登录过程运行测试时，Testcafe 并没有打开弹出窗口，而是在同一页面上打开了 facebook 表单，并且从不重定向到该页面。

此外，我尝试使用ClientFunction（以及Roles）在本地存储上设置一些dummy token，但我的网站永远无法访问该令牌，因为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)
})

任何帮助将不胜感激

感谢您的宝贵时间。

【问题讨论】：

标签： javascript reactjs facebook local-storage testcafe

【解决方案1】：

2021 年 2 月更新

TestCafe 现在支持多个浏览器窗口，您可以通过 Facebook 弹出表单登录，没有任何问题。有关详细信息，请参阅 Multiple Browser Windows 主题。

目前，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 进行操作。

另外，我想提一下Testing in Multiple browser windows是我们的优先任务之一，它是TestCafe Roadmap的一部分

【讨论】：