How to click a chessground piece with cypress

[trufa]

I am trying to click a piece on the chessground board with cypress.

For some reason, it's not triggering a click event.

I'm assuming it has something to do with how chessground binds clicks, or something svg related?

I've tried several things:

    cy.get("cg-board")
      .should("be.visible")
      .trigger("mousedown", offset.x, offset.y, {
        force: true,
      });
    cy.get("svg.cg-shapes")
      .should("be.visible")
      .trigger("mousedown", offset.x, offset.y, {
        force: true,
      });
    cy.get("svg.cg-custom-svgs")
      .should("be.visible")
      .trigger("mousedown", offset.x, offset.y, {
        force: true,
      });
    cy.get("div.cg-wrap")
      .should("be.visible")
      .trigger("mousedown", offset.x, offset.y, {
        force: true,
      });
    cy.get("piece.white.pawn:nth(1)")
      .should("be.visible")
      .trigger("mousedown", { force: true });

    cy.get("cg-board").should("be.visible").click(offset.x, offset.y, {
      force: true,
    });
    cy.get("svg.cg-shapes").should("be.visible").click(offset.x, offset.y, {
      force: true,
    });
    cy.get("svg.cg-custom-svgs")
      .should("be.visible")
      .click(offset.x, offset.y, {
        force: true,
      });
    cy.get("div.cg-wrap").should("be.visible").click(offset.x, offset.y, {
      force: true,
    });
    cy.get("piece.white.pawn:nth(1)")
      .should("be.visible")
      .click({ force: true });

When debugging, it seems to be clicking:

I know this is not really a chessground issue, I am just wondering if there's something special about how clicks are bound to elements or if someone has an intuition about which element should I be binding to?

[ornicar]

by design, we try to restrict interaction to legitimate human input with event.isTrusted: https://github.com/lichess-org/chessground/blob/9a5ed4417c5f7e5393ed0bef5ad5c1db8df51ea3/src/drag.ts#L23

[trufa]

@ornicar Oh nice! thanks! I'll try to disable it for testing! Thanks for the quick answer!

[rmarabini]

Hi @trufa,

Did you manage to send clicks using cypress?. I commented the line

if (!e.isTrusted || (e.button !== undefined && e.button !== 0)) return; // only touch or left click

but still not working

[trufa]

@rmarabini Yes I did!

I am not with a computer at the moment now, but you can check the project I'm working on in my profile.

Project is opening.expert and the latest branch is auth-ft. There I got it to work, remember to set the trust parameter to true in the latest version.

[rmarabini]

Hi @trufa,

Thanks for you help. Sorry for this, I guess, trivial question but... how do you set the trust parameter to true?

cheers

[trufa]

No worries, when you do your new instance, you pass as a option:

{
  ...
  trustAllEvents:true,
  ...
}

@rmarabini

[rmarabini]

Hi @trufa,

Finally I succeeded ;-).  Thanks for you help.

My problem was a little complicate because I do not use chessground but vue3-chessboard that wraps chessground. vue3-chessboard was based on chessground 8 which did not support the trustAllEvents flag. Luckily vue3-chessboard author was kind enough to update his package to chessground 9.

[trufa]

@rmarabini awesome! if wrappers give you too much trouble, it's not too hard to make your own which you control.