小编Cor*_*sen的帖子

我正在使用testcafe进行e2e测试我当前的电子商务项目。在产品列表页面上，我使用选择器来选择产品图块并单击。之后，该页面将加载产品详细信息页面，我可以继续进行测试。

问题是尽管页面尚未加载时，它已经继续使用产品详细信息页面的断言。我假设click动作将等待元素出现并等待页面加载，然后再继续进行断言。

测试：

import HomePage from '../pages/HomePage/HomePage';
import ProductListerPage from '../pages/ProductListerPage/ProductListerPage';
import Browser from '../helpers/Browser';

fixture('test case').page('http://www.homepage.com');

test('test 1', async t => {
  const homePage = new HomePage();
  await homePage.header.search(t, 'foo bar');

  await t.expect(Browser.getCurrentLocation()).eql('http://www.product-lister/search?q=3301');
  const productListerPage = new ProductListerPage();
  await productListerPage.goToFirstProduct(); // <<< in here I click on the first product

  await t.expect(Browser.getCurrentLocation()).eql('http://www.product-detail/'); // << already executed on lister page instead of product page
});

ProductListerPage：

import AbstractPage from '../AbstractPage';
import {t, Selector} from "testcafe";

class ProductListerPage extends AbstractPage { …

对于一个新项目，我开始使用汇总来捆绑一个UI库，并在React应用程序中使用该库。我还将纱线工作区用于UI库和Web应用程序之间的内部依赖项管理。

当我尝试在Web应用程序中使用UI库时，导入返回未定义，并引发“无法从未定义中获取”错误。

TypeError：无法在应用程序（C：/Users/user/dev/project/packages/project-web/src/pages/App.jsx：9：6）上读取未定义[0]的属性'NavBar'

Webapp代码：

import React from 'react';
import {NavBar} from 'project-ui';

const App = () => (
  <div>
    <NavBar/>

    <div>App component!x</div>
  </div>
);

根package.json：

{
  "name": "project",
  "version": "1.0.0",
  "private": true,
  "workspaces": [
    "packages/*"
  ]
}

UI package.json：

{
  "name": "project-ui",
  "version": "1.0.0",
  "main": "dist/project-ui.cjs.js",
  "jsnext:main": "dist/project-ui.es.js",
  "module": "dist/project-ui.es.js",
  "files": ["dist"],
  "scripts": {
    "build": "rollup -c"
  },
  "peerDependencies": {
    "react": "16.3.2",
    "react-dom": "16.3.2"
  },
  "devDependencies": {
    "babel-core": "6.26.3",
    "babel-plugin-external-helpers": "6.22.0",
    "babel-preset-env": "1.6.1",
    "babel-preset-react": "6.24.1",
    "babel-preset-stage-2": "6.24.1",
    "rollup": "0.60.0",
    "rollup-plugin-babel": …

我有一个<select>带有几个<option>标签的。其中一些可以通过使用“is-disabled”类来禁用。我想要做的是选择列表中的第一个可用选项。为此，我使用了在 testcafe 网站上找到的示例（https://devexpress.github.io/testcafe/documentation/recipes/testing-select-elements.html），但我似乎无法让它工作。

运行测试时，该工具会单击一次选择，然后再单击一次，然后关闭。此后，不再选择任何值。

有没有更好的方法来处理选项的动态选择？或者什么是更好的解决方案？任何帮助将不胜感激！

问候康奈尔

SizeSelector component:

import {t, Selector} from 'testcafe';

class SizeSelector {

  constructor() {
    this._sizeSelector = Selector('.sizeSelectionGroup');
    this._selectors = this._sizeSelector.child('.productSizeSelection');
    this._widthSelector = this._selectors.nth(0);

    // todo other size types (single numeric/text)
  }

  // todo refactor
  async setFirstAvailableWidth() {
    const options = this._widthSelector.find('option'); // contains 13 elements while debugging
    const availableOptions = options.filter(node => {
      return !node.classList.contains('is-disabled');
    });

    const count = await availableOptions.count; // contains around 8 elements while debugging
    if (count …

我有一个 Typescript Vue monorepo 项目（yarn 工作区），其中包含 3 个包：web、样式和组件。对于组件包，我想利用 Storybook 进行可视化测试和隔离开发。

当我将它们导入到 Web 项目中时，这些组件可以正常工作，但是当我运行 Storybook 时，出现以下错误：

Module not found: Error: Can't resolve './../components' in 'jdk-darts-frontend/packages/jdk-darts-components/.storybook'
 @ ./.storybook/config.ts 

故事书管理器 webpack 配置似乎存在 typescript/vue 导入问题。

故事书配置：

import Vue from 'vue';
import {addParameters, configure} from '@storybook/vue';
import {Button, Card, FinalInput, Icon, Input, Modal, Table} from './../components';

...

Vue.component('d-button', Button);
Vue.component('d-card', Card);
Vue.component('d-icon', Icon);
Vue.component('d-input', Input);
Vue.component('d-final-form-input', FinalInput);
Vue.component('d-modal', Modal);
Vue.component('d-table', Table);

function loadStories() {
  const req = require.context('../components', true, /\.stories\.ts$/);
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, …

我正在为我的新项目使用 react-redux 和 redux-form。当我创建自定义选择字段时，它永远不会将第一个选项值（即已经“选择”）传递给 handleSubmit 函数。只有当我手动选择一个值时，它才能正确传递选项值。

自定义选择：

const Select = ({ input, options, disabled }) => (
  <div>
    <select {...input} disabled={disabled}>
      { options.map(option =>
        <option key={option.value} value={option.value}>
          {option.label}
        </option>
      )}
    </select>
  </div>
);

表单组件：

function RegisterForm({ handleSubmit, titles }) {
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="title">Title</label>
      <Field name="title" options={titles} component={Select} />

      <button type="submit">Submit</button>
    </form>
  );
}

RegisterForm.propTypes = {
  handleSubmit: PropTypes.func.isRequired,
  titles: PropTypes.array.isRequired,
};

export default reduxForm({
  form: 'register'
})(RegisterForm);

我是否必须从 redux 状态初始化选择？还是有另一种方法可以强制第一个值成为初始值？

提前致谢！