typescript - Cypress .trigger-kommandoer med mousedown, mousemove og mouseup fungerer ikke

Er det en hemmelig metode for å få dette til å fungere?

Vi bruker den dragbare biblioteket for å gjøre dette i brukergrensesnittet.

https://github.com/Shopify/draggable/tree/master/src/Draggable

Jeg prøver å dra en kolonne til den neste ved hjelp av Cypress-automatiseringsprogrammet.

Dette er koden min:

cy.get(dataExplorerTableAttributeDraggable)
      .eq(0)
      .trigger('mousedown', { which: 1 });
    cy.get(dataExplorerTableAttributeDraggable)
      .eq(1)
      .trigger('mousemove')
      .trigger('mouseup');

Å kjøre denne koden gir ingen synlig effekt overhodet.

Prøvde også dette:

cy.get(dataExplorerTableAttributeDraggable)
      .eq(2)
      .trigger('mousedown', { which: 1 })
      .trigger('dragstart', {})
      .trigger('drag', {});
    cy.get(dataExplorerTableAttributeDraggable)
      .eq(0)
      .trigger('dragover')
      .trigger('drop')
      .trigger('dragend')
      .trigger('mouseup');

Jeg må gjøre det klart at jeg trenger at automatiseringen faktisk UTFØRER dra og slipp, ikke bare utløser hendelser.

Hva går jeg glipp av?

Svar #1

Jeg har til og med stått overfor et lignende problem; den eneste justeringen som hjalp meg var å sette - {clientX: 505, clientY: 357}

cy.get(etlWidget)
    .trigger('mouseover')
    .trigger('mousedown', {which: 1})
    .trigger('mousemove', {clientX: 505, clientY: 357})
    .xpath(PageElements.workflow.x_initial_drop_target_area)
    .trigger('mousemove')
    .trigger('mouseup', {force: true})

Til orientering, du må lytte til nettleserhendelsene og sette disse detaljene. Mer informasjon her - https://developers.google.com/web/tools/chrome-devtools/console/events

Jeg tror også at dette bare vil kjøre på fast visningsområde. Vennligst se om dette hjelper.

Svar #2

Problembeskrivelse

Jeg har støtt på samme problem, men jeg brukte ikke noe bibliotek.

Problemet var at et sted i koden hadde jeg typekontroll for hendelsen, slik som dette:

if (event instanceof MouseEvent) {
    /* this never gets executed in Cypress but works fine when manually testing in browser */
}

Etter litt feilsøking fant jeg ut at mousedown event (utløst fra Cypress) er en instans av Event, men fra et annet miljø (event instanceof Event returnerte alltid false). Jeg har aldri gravd dypt i dette, så jeg kan ta feil.

Uansett, løsningen for meg var å utløse et innfødt JavaScript-event i Cypress ved å bruke MouseEvent fra cy.window().

Potensiell løsning for ditt tilfelle

Nå etter å ha sett litt rundt på det biblioteket du bruker, ser jeg at det bruker hendelser som DragMouseEvent som kan være det samme problemet jeg hadde. Hvis det er tilfelle, antar jeg at følgende kode ville få det til å fungere (jeg har ikke testet):

cy.window().then(win => {
    cy.get(dataExplorerTableAttributeDraggable)
      .eq(0)
      .then($element => $element[0].dispatchEvent(new win.MouseEvent('mousedown', {button: 1, clientX: 100, clientY: 100})));
    cy.get(dataExplorerTableAttributeDraggable)
      .eq(1)
      .then($element => $element[0].dispatchEvent(new win.MouseEvent('mousemove', {clientX: 100, clientY: 100})))
      .then($element => $element[0].dispatchEvent(new win.MouseEvent('mouseup', {clientX: 100, clientY: 100})));
})

Vennligst merk at $element er et element pakket inn i jQuery. Også clientX og clientY bør ha riktige posisjonsverdier for elementet på siden som du ønsker å dra (100 er bare en plassholder).

Alternativ løsning på problemet mitt ovenfor er å utføre duck-type sjekk i koden slik:

if (event.pageX && event.pageY) {
    /* this now gets executed in Cypress and when manually testing in browser */
}

Dette vil bare fungere hvis du skriver din egen kode (ikke bruker bibliotek).

Relaterte artikler