相关疑难解决方法(0)

请考虑以下两个文件:

app.js

import Game       from './game/game';
import React      from 'react';
import ReactDOM   from 'react-dom';

export default (absPath) => {
  let gameElement = document.getElementById("container");

  if (gameElement !== null) {
      ReactDOM.render(
          <Game mainPath={absPath} />,
          gameElement
      );
  }
}

index.js

import App from './src/app';

该 gulpfile.js

var gulp        = require('gulp');
var source      = require('vinyl-source-stream');
var browserify  = require('browserify');
var babelify    = require("babelify");
var watch       = require('gulp-watch');

gulp.task('make:game', function(){
  return browserify({
    entries: [
      'index.js'
    ]
  })
  .transform('babelify')
  .bundle()
  .pipe(source('index.js'))
  .pipe(gulp.dest('app/'));
});

错误:

gulp make:game …

我有垫选择下拉列表如下

<mat-form-field>
   <mat-label>Gender</mat-label>
      <mat-select id="gender" required formControlName="gender">
         <mat-option id="Male" value="male"> Male </mat-option>
         <mat-option value="female"> Female </mat-option>
      </mat-select>
 </mat-form-field>

我正在尝试使用 Cypress 从该领域选择男性或女性。

cy.get('mat-select').click().select('Male')

使用上面的代码，我收到以下错误：

CypressError: cy.select() can only be called on a <select>. Your subject is a: <mat-select>

我需要一些帮助来解决这个问题，谢谢。

对我有用的代码。

cy.get('#gender').click().then(() => {
            cy.get('#male').click()
        })

问题在标题中给出,即访问其父项被隐藏的元素.问题是,根据cypress.io文档 :

一个元素被认为是隐藏的,如果:

• 它的宽度或高度为0.
• 它的CSS属性(或祖先)是visibility:hidden.
• 它的CSS属性(或祖先)是display:none.
• 它的CSS属性是位置:固定,它是屏幕外或掩盖.

但是我正在使用的代码要求我单击其父级被隐藏的元素,而元素本身是可见的.

因此,每次我尝试单击该元素时,都会引发错误读取:

CypressError:超时重试:预期'<mdc-select-item #mdc-select-item-4.mdc-list-item>'为'可见'

此元素'<mdc-select-item #mdc-select-item-4.mdc-list-item>'不可见,因为其父元素'<mdc-select-menu.mdc-simple-menu.mdc-select__menu>'有CSS属性:'display:none'

我正在使用的元素是一个dropdown item写的pug.该元素是angular-mdc-web中定义的组件,它使用mdc-select下拉菜单mdc-select-item及其元素(项),这是我必须访问的.

类似结构的示例代码:

//pug
mdc-select(placeholder="installation type"
            '[closeOnScroll]'="true")
    mdc-select-item(value="false") ITEM1
    mdc-select-item(value="true") ITEM2

在上面,ITEM1是我必须访问的元素.我这样做cypress.io如下:

//cypress.io
// click on the dropdown menu to show the dropdown (items)
cy.get("mdc-select").contains("installation type").click();
// try to access ITEM1
cy.get('mdc-select-item').contains("ITEM1").should('be.visible').click();

试过{force:true}强迫项目点击,但没有运气.尝试使用{enter}父按钮上的按键选择项目mdc-select,但再次没有运气,因为它抛出:

CypressError:cy.type()只能在textarea或:text上调用.您的主题是:<mdc-select-label class ="mdc-select__selected-text">选择... </ mdc-select-label>

也尝试使用该select命令,但它不可能,因为赛普拉斯引擎无法将元素识别为 …

我需要使用cypress测试angularjs应用程序的下拉列表。

我需要单击一个下拉列表，然后从下拉列表中选择或单击一个项目。我想下面这是因为在第二个get（）方法的ID号不断变化作为它的动态生成的工作了一个实例，但没有其他时间。这不是带有html中选项的标准选择。

1）无论如何，是否可以在每个选项上设置唯一属性，然后选择所需的选项，还是可以仅基于列表项的描述进行选择？我怎样才能做到这一点？

2）是否有以下正确的下拉列表测试方法？我敢肯定还有比这更好的方法吗？

请谁能帮忙

cy.get('[name="countries"]').click().get.('[id="selection_option_375"]').click()

DOM

 <md-select ng-model="target.countryType" name="countries" ng-required="requiredData.AssertRequiredFields" ng-change="oncountryTypeChanged($event)" 
  md-container-class="large" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" tabindex="0" aria-disabled="false" 
  role="listbox" aria-expanded="false" aria-multiselectable="false" id="select_297" aria-owns="select_container_298" aria-required="true" 
  required="required" aria-invalid="true" aria-label="country type" style=""><md-select-value class="md-select-value md-select-placeholder" 
  id="select_value_label_288">
  <span>country type</span><span class="md-select-icon" aria-hidden="true"></span>
  </md-select-value>
  <div class="md-select-menu-container large" aria-hidden="true" id="select_container_298"><md-select-menu class="_md"><md-content class="_md md-no-flicker">
                            <!-- ngRepeat: countryType in refData.countryDetails.countryType.Items --><md-option ng-repeat="countryType in refData.countryDetails.countryType.Items" ng-value="countryType" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_369" aria-checked="true" value="[object Object]" style=""><div class="md-text ng-binding">
                                Country one
                            </div></md-option><md-option ng-repeat="countryType in refData.countryDetails.countryType.Items" ng-value="countryType" tabindex="0" class="ng-scope md-ink-ripple" role="option" …