Question

我对 Cypress 比较陌生，尽管它看起来很简单，但仍有一些我不明白的地方。特殊问题：

  const componentsRouteMatcher = {
    pathname: '/component-management/api/components',
    query: {
      size: '5',
      page: '0',
      property: 'name',
      direction: 'asc',
      activated: 'true',
      organisationId: '33'
    }
  };

    beforeEach(() => {
   

    cy.interceptStaticDataCalls(); // just a custom command, containing interceptors registrations

    cy.intercept(componentsRouteMatcher, {fixture: 'components/first-5.json'}).as('first5');

    const composSecond5Route = Object.assign({}, componentsRouteMatcher, {query: {page: '1'}});
    cy.intercept(composSecond5Route, {fixture: 'components/second-5.json'}).as('second5');

    const composFirst50Route = Object.assign({}, componentsRouteMatcher, {query: {size: '50'}});
    cy.intercept(composFirst50Route, {fixture: 'components/first-50.json'}).as('first50');

    const composFirst20Route = Object.assign({}, componentsRouteMatcher, {query: {size: '20'}});
    cy.intercept(composFirst20Route, {fixture: 'components/first-20.json'}).as('first20');


    cy.intercept('/component-management/api/functional-areas', {fixture: 'functional-areas/functional-areas.json'}).as('fa');

  });

 it('should display all components based on a default filter', () => {
    cy.visit("/");
    cy.wait(['@first20', '@fa'], {timeout: 5000});
});

所以问题出在最后一个拦截器中 - 它加载了一个装置（一个几 MB 大的 JSON 文件），但它从不拦截。矛盾的部分是它被 Cypress 列在可用路由列表中。当我移动特定的拦截器时，在 beforeEach 的开头，它起作用了。我猜在下面发生了一些异步过程，但根本不直观。有没有什么可控的方法来设置所有这些拦截器，而无需猜测何时放置哪个拦截器？

先谢谢你！

更新：

// standard set of initializations that will be required for all tests
Cypress.Commands.add('interceptStaticDataCalls', () => {
  cy.intercept('/component-management/api/jira/project', { fixture: 'projects.json'});
  cy.intercept('/component-management/api/appclientrelationships/apps', { fixture: 'apps.json'});
  cy.intercept('/component-management/api/appclientrelationships/clients', { fixture: 'clients.json'});
  cy.intercept('/component-management/api/appclientrelationships', { fixture: 'appClientRelationships.json'});
  cy.intercept('/component-management/api/usergroups', { fixture: 'usergroups.json'});
  cy.intercept('/component-management/api/organisations', { fixture: 'organisations.json'});
  cy.intercept('/component-management/api/configs', { fixture: 'configs.json'});
  //we must use pathname here, otherwise it would intercept also the current user request
  cy.intercept({pathname: '/component-management/api/users'}, { fixture: 'users.json'});
})

Answer 1

在阅读了 Cypress 的一些源代码后，我意识到实际上，Cypress 中的几乎所有内容都是异步的，以及请求拦截器注册（事件驱动）。为了确保我“访问”了主页，在注册了所有拦截器之后，我只是将所有内容提取到一个异步函数中（当然用 await 注释了所有异步进程），然后我访问了“/”。请参阅下面的工作示例：

async function initTests() {

  cy.interceptStaticDataCalls();

  await cy.intercept(componentsRouteMatcher, {fixture: 'components/first-5.json'}).as('first5');

  const composSecond5Route = Object.assign({}, componentsRouteMatcher, {query: {page: '1'}});
  await cy.intercept(composSecond5Route, {fixture: 'components/second-5.json'}).as('second5');

  const composFirst50Route = Object.assign({}, componentsRouteMatcher, {query: {size: '50'}});
  await cy.intercept(composFirst50Route, {fixture: 'components/first-50.json'}).as('first50');

  const composFirst20Route = Object.assign({}, componentsRouteMatcher, {query: {size: '20'}});
  await cy.intercept(composFirst20Route, {fixture: 'components/first-20.json'}).as('first20');

  await cy.intercept('/component-management/api/functional-areas', {fixture: 'functional-areas/functional-areas.json'}).as('fa');
}


.....

  beforeEach( () => {
    initTests().then( () => {
      console.log('Initialized!');
      cy.visit("/");
    })
  });

我们如何在 beforeEach 中正确初始化 Cypress 拦截？

1 个答案: