标签: cypress-component-test-runner

我正在 Vue 上的 Cypress 中使用组件测试。我的项目组件使用vuetify 插件。

目前，测试的组件使用 Vuetify 加载：

import DebuggingTemporaryComponent from "./DebuggingTemporaryComponent";\nimport {mount} from "@cypress/vue";\nimport vuetify from \'../../resources/js/vuetify\'\n\nit(\'mounts the component with vuetify\', () => {\n    \n    mount(DebuggingTemporaryComponent,{vuetify,})\n\n    cy.contains(\'Hello World\') \xe2\x9c\x85\n\n}\n

<v-app>但是，样式无法正常运行，因为 Vuetify 组件需要在页面上至少包装一次。在组件测试中，这种情况不会发生。

我需要按照React 等效文档中的建议自定义包装器。然而，每当我尝试创建自己的函数来执行此操作时，我都会收到一条错误消息，指出不存在适当的 webpack 加载器。Vue 加载器已经存在并正在工作。

import {mount as cypressMount} from \'@cypress/vue\'\n\nexport function mount (component){\n    return cypressMount(<v-app>component</v-app>, prepareComponent(props, options))\n}\n\n

谁能帮助我下一步该做什么？

我正在对一个简单的反应组件进行组件测试，我想渲染该组件，然后对其进行一些测试。

问题是似乎cy.get()没有根据属性找到组件data-testid。

我用简单的方法测试了一下div，div可以发现很好。

我还注意到在检查DOMcypress runner 时，组件没有被渲染，但它的内容被渲染。基本上没有<MockComponent>

  it.only("renders and finds Component", () => {
    cy.mount(
      <ApolloProvider client={client}>
        <MockComponent data-testid='mock-component' {...someData} />
        <div data-testid='my-div'></div>
      </ApolloProvider>
    );

    cy.get("[data-testid='my-div']").should('exist'); //this works
    cy.get("[data-testid='mock-component']").should('exist'); //this doesn't

  });

我怎样才能获得<MockComponent>cypress ，以便我可以对其进行测试？

我已经通过cypress open-ct依赖导入来运行我的组件测试一段时间了/node_modules/tailwindcss/dist/tailwindcss.min.css。

自从升级到 Tailwind v3 以来，我的一些测试失败了，因为没有可以导入的预构建 CSS 文件 - 所有内容都是及时生成的。

例如，测试当单击固定且全宽的覆盖层时模态是否关闭会失败，因为整个模态已渲染，因此赛普拉斯无法访问它。

由于无法访问 Tailwind 类而产生的另一个附带问题是，在 CI 中运行测试时录制的视频无法使用，因为它们只是一堆随机的本机元素。

我一直在每个测试文件的顶部像这样导入 Tailwind （在描述之前）

import { mount } from '@cypress/vue'
import '/node_modules/tailwindcss/dist/tailwind.min.css'
import MultiSelectField from './MultiSelectField.vue'
import { ref } from "vue";

有什么想法如何包含 Tailwind （最好是全球范围内）以便测试不会失败？

我的导航栏组件依赖于useRouter提供的功能nextjs/router来设置活动链接的样式。

我正在尝试使用 Cypress 测试这种行为，但我不确定应该如何组织它。赛普拉斯似乎不喜欢getRoutePathname()，并且在我的测试环境中返回了未定义。

这是我要测试的组件：

import Link from 'next/link'
import { useRouter } from 'next/router'

function getRoutePathname() {
  const router = useRouter()
  return router.pathname
}

const Navbar = props => {
  const pathname = getRoutePathname()

  return (
    <nav>
      <div className="mr-auto">
        <h1>Cody Bontecou</h1>
      </div>
      {props.links.map(link => (
        <Link key={link.to} href={link.to}>
          <a
            className={`border-transparent border-b-2 hover:border-blue-ninja 
            ${pathname === link.to ? 'border-blue-ninja' : ''}`}
          >
            {link.text}
          </a>
        </Link>
      ))}
    </nav>
  )
}

export default Navbar

我有 Cypress 组件测试运行程序的骨架设置，并且在硬编码时能够加载组件 …

我在 React 中尝试 cypress 组件测试，但对一些基本的东西有点困惑，比如如何断言点击处理程序。

开玩笑我可以做类似的事情

const hideMock = jest.fn();

renderWithProviders(
    <EmployeeCreationWizard
        hide={hideMock}
        isVisible={true}
        employeeId={123}
    />,
);

await cancel();

expect(hideMock).toBeCalledTimes(1);

我该如何使用const hideMock = jest.fn();柏树间谍？

这就是我得到的

it.only('invoke hide() once upon clicking on cancel button', () => {
    const hideSpy = cy.spy();
    cy.interceptEmployeeCreationWizard();
    cy.mount(
      <EmployeeCreationWizard
        isVisible={true}
        hide={hideSpy}
        employeeId={123}
      />,
    );

    cy.findByTestId('employee-wizard-drawer-cancel').click();
    cy.get('[data-test-id="employee-wizard-drawer-close"]').click();
    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
    // expect(hideSpy).to.be.calledOnce;
  });

有没有人成功地让 cy.tick() 在 cypress 组件测试中工作。cy.clock() 会停止时间，但在 cypress 组件测试中，tick 不会将其向前移动。如果有人能够做到这一点，请举出简单的例子。

再说一次，这是在 cypress 组件测试中，而不是 e2n 测试中。
我还在 before() 方法中添加了时钟。

我是组件测试和在赛普拉斯中使用间谍的新手，所以这可能是一个愚蠢的问题。

我有一个非常简单的组件，我正在测试它，当您在组件中进行选择时，选择会通过 modelValue 属性发送回父级。

我的组件在我的应用程序中工作（v-model 更新为选择的正确值就好），但我似乎无法在测试中捕获和验证它。

在我的组件内部，这是我执行发射的方式：

handleSelectionChange() {
  console.log("emitting update:modelValue= ", this.selectedOption);
  this.$emit('update:modelValue', this.selectedOption);
}, 

控制台显示测试运行时值的变化，所以我认为这部分没问题。同样，当我在应用程序中使用该组件时，v-model 正在更新，因此我希望这不是问题。

我的Cypress 组件测试如下所示：

it.only('should emit an event when the value is changed', () => {
const mockData = ["one", "two", "three"];

cy.intercept('GET', '/v1/product', {
  statusCode: 200,
  body: mockData,
}).as('getProductData');

cy.mount(ProductPicker, {
  props: { modelValue: null },
  on: {
    'update:modelValue': cy.spy().as('updateModelValueSpy'),
  },
}).then(() => {
  cy.get('select').select('two');

  // Wait added as part of trouble shooting, hopefully not needed
  cy.wait(500); 

  // Ensure the …

我有一些代码尝试捕获 iframe 内的元素，但我只是不断返回错误

it('Send Medication',function(){
       cy.get('.aut-iframe') 
       .should(iframe => expect(iframe.contents().find('body')).to.exist)
       .then(iframe => cy.wrap(iframe.contents().find('body')))
       .within({}, $iframe => {
            cy.get('.pending-medication-check-box').click({force:true})

这是我得到的错误：

最后，这是 iframe 信息：

在我的 cypress 组件测试运行程序中从我的 nx monorepo 安装组件时，自定义样式不会应用于已安装的组件。这些样式是 scss 文件，所以我真的不知道如何在安装之前编译/包含这些样式。

谁能深入了解如何解决这个问题？我需要在哪里介入并包含 scss 文件？

预先感谢^^

当尝试使用 Vue2 和 Vuetify 使用组合 API 设置 Cypress 10 进行组件测试时，该指南非常令人困惑，并且显然不正确。有很多未知标签的错误，从setup()不可访问的返回的东西，不应该存在的传播运算符，不起作用的导入等等。设置以便测试有效的正确方法是什么？

我现在真的很困惑，不知道该怎么办。

Cypress 似乎可以接受明显失败的测试，而且不会执行，cy.wait(10000);正如您在图像右上角的时间戳中看到的那样。

我在 nx Angular 项目中构建了 Cypress 组件测试。这是测试和输出，我做错了什么？

毕竟部分是因为有插件而存在的，没有它也有同样的行为。

/// <reference types="cypress" />

import { MatDialogRef } from "@angular/material/dialog";
import { CreateDiscussionPopUpComponent } from "./create-discussion-pop-up.component";
import { NO_ERRORS_SCHEMA } from "@angular/core";
import { MatInputModule } from "@angular/material/input";
import { SharedUtilitiesModule, MaterialModule } from "@xxx/shared-utilities";
import {
  TranslateLoader,
  TranslateModule,
  TranslateService,
} from "@ngx-translate/core";
import {
  TranslateLoaderMock,
  TranslateServiceTestProvider,
} from "@xxx/shared-services/mocks";
import { ComponentFixture, TestBed } from "@angular/core/testing";
import { FlexLayoutModule } from "@angular/flex-layout";
import { FormsModule, ReactiveFormsModule } …

我从库中导入一个角度组件。它有选择器<imported-component-group>。

我将此组件放置在本地角度组件内。

在编写 cypress 组件测试时，我无法通过组件名称访问此导入的组件，而只能通过分配给它的类名称来访问。

这就是我将导入的组件放置在本地组件中的方式：

<imported-component-group *ngIf="showImportedComponent(condition$) | async" class="importedComponentGroup">
   
   <imported-component>
   ...
   </imported-component>
   
   <imported-component>
   ...
   </imported-component>
   
</imported-component-group>

从我的组件测试中，我尝试像这样解决它：

cy.get('imported-component-group')

所以：

cy.get('<imported-component-group>')

这两种方法都找不到我的组件，但如果我通过类来解决它，它就可以工作：

cy.get('.importedComponentGroup')

条件*ngIf应该不是问题，不然cy.get('.importedComponent')也找不到。此外，该组件在 HTML 代码中仅存在一次。

由于我仅为组件测试创建了类，因此我想删除它并直接通过其标签名称来寻址组件。

如果有人知道我在这里缺少什么，那就太好了。

我正在测试一个带有弹出窗口的 Web 应用程序表单，需要花费大量时间来加载另一个需要填写的弹出表单

目前，我等待 20 秒，这主要有效，但有时弹出窗口需要 20 秒以上才能加载，这会使我的测试脚本失败

弹出窗口是使用按钮触发的，当单击按钮时，会发出 ajax 请求，当响应到来时，会加载（渲染）弹出窗口

弹出窗口通常需要这么多时间，因为 Ajax 请求需要很长时间，所以我想创建一个动态函数来等待该弹出窗口呈现

所以我想创建一个动态等待函数，它将等待弹出窗口呈现（注意：它是弹出窗口而不是另一个页面）

代码：

    cy.get("div[class='question-btn'] a[class='btn btn-primary btn-lg cat-new-question-sortable']").click() 
    // button which triggers the popup

    cy.wait(9000)

    //multiple input, types get filled in the poup

    cy.get("input[value='Submit']").click()    // button which closes or submits the popup
    cy.wait(9500)



    cy.get("div[class='question-btn'] a[class='btn btn-primary btn-lg cat-new-question-sortable']").click() 
    // button which triggers the next popup and cycle repeats