小编Ric*_*sen的帖子

我正在尝试使用 Cypress 为该应用程序编写端到端测试：https://app.gotphoto.com/admin/auth/login

当我从浏览器访问上述网址时，会按预期显示登录表单。

当我通过 Cypress 访问上述网址时：

• cypress 首先导航到https://app.gotphoto.com/admin/auth/login
• 之后我立即被重定向到https://app.gotphoto.com/__/并且登录表单未显示

这是 Cypress 内部的两个屏幕截图：

我的问题是：为什么它在我的浏览器中的运行方式与在 Cypress / Cypress 浏览器中的运行方式有差异？

我使用的浏览器是 Chrome 89，无论是否使用 Cypress 运行。

我正在运行的整个测试是这样的：

describe('login screen', () => {
  it('logs in', () => {
    cy.visit('/admin/auth/login');
  });
});

使用 cypress.json：

{
  "baseUrl": "https://app.gotphoto.com"
}

我使用上述配置创建了一个存储库，因此很容易重现。

我正在尝试从代表金钱的数值中删除空格。

例如，我想1 000 kr成为1000。当货币为10 000

我正在使用此函数来删除，kr但是当我尝试添加另一个函数时.replace它不起作用：

Cypress.Commands.add('currency', (selector) => {
      cy.get(selector)
        .children()
        .eq(1)
        .invoke('text') // get text
        .then((text) => +text.replace('kr', '').trim());
    });

如何添加另一个 .replace 来删除数值中的额外空格？

我想在打开页面时处理对某些文件的一些请求。在屏幕截图中，您可以看到来自cypress面板的日志：

为了处理这些请求，我添加了如下代码：

    it('Check intercept', () => {
        cy.intercept('/settings.json').as('settings');
        cy.intercept('/static/model/*').as('plates');

        cy.visit('/editor/ckpdx02f7098c08632il2aetr');

        cy.wait('@settings')
        cy.wait('@plates')
    });

它适用于settings.json，但.stl不适用于文件

如果我这样写它也不起作用：

    it('Check intercept', () => {
        cy.intercept('/settings.json').as('settings');
        cy.intercept('/static/model/ckpdwtgpg096g08636kd57n39/plate_4.stl').as('plate4');
        cy.intercept('/static/model/ckpdwtgpg096g08636kd57n39/plate_3.stl').as('plate3');
        cy.intercept('/static/model/ckpdwtgpg096g08636kd57n39/plate_2.stl').as('plate2');
        cy.intercept('/static/model/ckpdwtgpg096g08636kd57n39/plate_1.stl').as('plate1');
        cy.intercept('/static/model/ckpdwtgpg096g08636kd57n39/plate_0.stl').as('plate0');

        cy.visit('/editor/ckpdx02f7098c08632il2aetr');

        cy.wait('@settings')
        cy.wait('@plate4')
        cy.wait('@plate3')
        cy.wait('@plate2')
        cy.wait('@plate1')
    });

我在文档中没有找到任何关于它的限制，欢迎提出您的想法:)

赛普拉斯：v7.4.0

UPDATE 1:

我发现了一个更多细节：如果打开 chrome 开发人员工具并在“网络”选项卡中禁用缓存 - 它始终可以正常工作

UPDATE 2:

我使用演示存储库创建了一个问题：https ://github.com/cypress-io/cypress/issues/16766

我正在构建一个应用程序，其中包含带有电影列表的不同页面。例如搜索页面（按搜索的电影）、演员的页面（按演员的电影）、类型的页面（按类型的电影）。问题是它们都共享相同的基本功能 - 根据某些标准加载电影列表。我有一个减速器，用于在加载某些内容后存储电影实体。但问题是我必须为每个页面类型创建一个单独的减速器来保存相关的电影 ID 以显示。

最初，我只是从头开始实现所有这些页面，同时复制大量代码 - 每个页面的单独操作、效果、reducers。现在我觉得它很丑陋，可以以更简洁的方式完成。

我的服务中已经有一个通用的queryMovies函数，它通过 options 参数查询电影。

你能提出任何组织这些代码的好方法吗？

编辑：

由于此帖已被删除，我无法发表评论或回复（只能编辑）。所以我添加这个链接作为编辑的一部分：https : //github.com/johnpapa/angular-ngrx-data

我认为这是一个很好的问题，并希望看到更多关于 ngRx 的适当架构/模式的讨论。

我有一个自定义命令，可以为我获取具有该data-cy属性的元素。

Cypress.Commands.add("getById", (id) => {
    cy.get(`[data-cy=${id}]`)
})

一切正常。

现在如果我有同样的 find 就好了。它看起来像这样：

Cypress.Commands.add("findById", { prevSubject: true }, (subject, id) => {
    cy.wrap(subject).find(`[data-cy=${id}]`)
})

问题是 cypress 使用此代码引发错误：

cy.root().then((root) => {
    if(root.findById("...").length) {
     ...
   }
})

错误是"root.findById" is not a function。

你能帮我正确编写那个自定义命令吗？

我正在构建 Next.js 应用程序并使用 Cypress 编写我的测试。我在本地使用.env.local文件配置环境变量。在 CI 管道中，它们通常被定义。

我正在尝试在 Cypress 中编写一个自定义命令来加密cypress/support/command.ts.

import { encryptSession } from 'utils/sessions';

Cypress.Commands.add(
  'loginWithCookie',
  ({
    issuer = 'some-issuer',
    publicAddress = 'some-address',
    email = 'some-mail',
  } = {}) => {
    const session = { issuer, publicAddress, email };

    return encryptSession(session).then(token => {
      cy.setCookie('my-session-token', token);
      return session;
    });
  },
);

当此命令运行时，它会失败，因为encryptSession使用了TOKEN_SECRET赛普拉斯未加载的环境变量。

import Iron from '@hapi/iron';

const TOKEN_SECRET = process.env.TOKEN_SECRET || '';

export function encryptSession(session: Record<string, unknown>) {
  return Iron.seal(session, …

我正在使用 vue-test-utils 中的 mount()，有一个组件可以导入应该在单元测试中模拟的服务。

我看到 mount() 有一个 mocks 选项，但是试图将指南中给出的例子外推，common-tips，模拟注入到注入服务的场景是我无法理解的。

mount(Component, {
  mocks: {
    ...?
  }
})

组件只是简单的导入服务，就是纯JS

import DataService from '../services/data.service'

我可以使用注入加载器来让它工作，这里详细介绍了使用模拟测试

有效的代码

const MyComponentInjector = require('!!vue-loader?inject!./MyComponent.vue')
const mockedServices = {
  '../services/data.service': {
    checkAll: () => { return Promise.resolve() }
  },
}
const MyComponentWithMocks = MyComponentInjector(mockedServices)

const wrapper = mount(MyComponentWithMocks, { store: mockStore, router })

mount(MyComponent, { mocks: ... }) 的语法是什么？

由于 mount() 有一个 mocks 选项，难道不能以某种形式将 mockedServices 传递给它吗？

我必须使用 cypress 对 angularjs 应用程序进行端到端测试。

我有两个相同输入元素的实例。它们具有相同的 ng-model、class 和 name。我们已经获得了由应用程序动态生成的唯一 ID，每次页面加载或在不同机器上测试时，该 ID 都不能相同。

作为下面的示例，有两个具有相同名称的输入元素，但我需要相同的文本出现在两个输入元素上。当我使用以下命令时，cypress 抱怨两个同名实例。如何在具有相同名称的两个输入元素上键入相同的文本“Hello world”？

cy.get('input[name=description]').type('Hello World')

我从 Cypress 开始，我想添加 Faker 来生成随机值。但我得到了以下结果。您能帮我解决这个问题吗？

登录页面.js

const faker = require('faker');

before(() => {
    let userData = {
        randomName: cy.faker.name.findName(),
        randomEmail: cy.faker.internet.email(),
        randomPassword: cy.faker.random.number()
    }
}

describe('Create new user', function () {
    it('Create new user via API', function () {
        cy.request('POST', '/cadastrarUsuario', {
            nome: userData.randomName,
            email: userData.randomEmail,
            senha: userData.randomPassword
        })
            .then((resp) => {
                expect(resp.status).to.eq(200)
            })
    })
})

describe('Login with user just created', function () {
    it('Login with user just created via API', function () {
        cy.request('POST', '/logar', {
            email: userData.randomEmail,
            senha: …

我需要循环遍历具有相同 CSS 选择器的多个元素，并在 element.text() 与字符串匹配时返回 true。如果没有匹配则最后返回 false。
我尝试了类似下面的方法，但没有成功：

getProfilePresentOrNot(profileName) {
  var flag = 0;
  cy.get('li>div>div>span').each(($el,index,$list) => {
    if ($el.text().includes(profileName)) {
      flag=1;
    }
  });
  return flag;
}

returns 0即使我可以确认 if 块中的条件满足，该函数始终会执行。

我试图到达 #1 元素，然后到达 #2 元素以单击 #3 元素。

但我在 Cypress 中获取正确的 CSS 选择器时遇到了麻烦。

如何为此编写测试脚本？

我已经尝试过 cy.get('.ui.active.visible.button.floating.dropdown.fr-dropdown').contains('Delete yield').click()但不起作用。

有没有办法先获得#1，然后#2 到达#3？这不是真正的代码，而是类似这样的代码。

cy.get('.yield-event__date-and-text--container').contains('10kg')
cy.get('.ui.active.visible.button.floating.dropdown.fr-dropdown').click()
cy.get('.item.fr-dropdown__option').contains('Delete yield').click()

预先非常感谢