I'm working on a Cypress test for the Polish Wikipedia plugin, and I have this code in my cypress test:

Cypress.Commands.overwrite('visit', (orig, path, options) => {
  return orig(`https://pl.wikipedia.org/${path}`);
});

Cypress.Commands.add('login', (pass) => {
  cy.visit('/w/index.php?title=Specjalna:Zaloguj');
  cy.get('#wpName1').type('<username>');
  cy.get('#wpPassword1').type(pass);
  cy.get('#userloginForm form').submit();
});

Cypress.Commands.add('dark_vector_wait', (pass) => {
  cy.get('.vector-menu-content-list > li:nth-child(7)', { timeout: 10000 }).should('be.visible');
});

And in my spec:

describe('dark vector test', () => {
  beforeEach('login', () => {
    cy.login(Cypress.env('WIKI_PASSWORD'));
  });

  it('test discussion', () => {
    cy.visit('/wiki/Dyskusja_wikipedysty:<username>');
    cy.dark_vector_wait();
    cy.matchImageSnapshot('discussion');
  });

  it('testing-page page', () => {
    cy.visit('/wiki/Wikipedysta:<username>/testing-page');
    cy.dark_vector_wait();
    cy.matchImageSnapshot('testing-page');
  });
});

And the second test is failing because as soon as Cypress type the password it automatically submits a form so cy.get('#userloginForm form').submit(); is executing after Cypress visits the home page (default redirect) and fail to find a form.

What's wrong? Why does Cypress auto-submit a form after a second time? This is not what Wikipedia is doing since the login form doesn't have any JavaScript code and you need to click login to be able to login to Wikipedia.

EDIT:

I've tried to

• Use BaseURL and remove overwrite of visit.
• Add type('{enter}'), but this only shows an error: cy.type() failed because this element is detached from the DOM.

EDIT 2

This is the screenshot of the action taken by cypress, second test has a page load without {enter} action and without form submit.

CodePudding user response：

The problem is in Cypress.Commands.overwrite('visit').

You pass the parameter with a leading slash '/wiki/Dyskusja_wikipedysty:<username>' but concatinate to base which also has a trailing slash https://pl.wikipedia.org/${path}, so now the full path is

https://pl.wikipedia.org//wiki/Dyskusja_wikipedysty:<username>

If you set baseUrl in configuration, Cypress sorts it out for you

cypress.config.js

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
    baseUrl: 'https://pl.wikipedia.org'
  }
})

Then remove the Cypress.Commands.overwrite('visit').

With these changes, I was able to pass both tests.

Using cy.session()

The problem might be one specific to locality, I do not have any steps missing in the Cypress log.

You can try adding a session cache so that the first login is re-used.

Cypress.Commands.add('login', (pass) => {
  cy.session('login', () => {                     // login occurs only once
                                                  // credentials are cached
    cy.visit('/w/index.php?title=Specjalna:Zaloguj');
    cy.get('#wpName1').type('Jack Bosko');
    cy.get('#wpPassword1').type(pass);
    cy.get('#userloginForm form').submit();

    // for good measure, confirm login was successful
    // by checking for your name on the page
    cy.contains('span', 'Jack Bosko')

  })
})

CodePudding user response：

So the problem was the weird IME keyboard that is part of MediaWiki. I somehow got it enabled on my system even when I was not logged in. Maybe added globally with cookies or something.

I noticed that keyboard when I was asking questions on the MediaWiki support page.

This is not related to Cypress. I'm investigating why the keyboard is there, and why clean environment it.