cypress rightclick

cypress 우클릭에 대해 알아보자.

 

https://docs.cypress.io/api/commands/rightclick

rightclick | Cypress Documentation

 

cypress는 .rightclick()은 브라우저의 기본 contextmenu를 제공하지 않는다.

우리는 cypress의 .rightclick()을 사용해서 직접 이벤트리스너로 등록한 contextmenu를 테스트할 수 있다.

Syntax

.rightclick()
.rightclick(options)
.rightclick(position)
.rightclick(position, options)
.rightclick(x, y)
.rightclick(x, y, options)

Arguments

position

기본 position은 center이다. 그 외 아래와 같은 position을 사용할 수 있다.

• topLeft 
• top
• topRight
• left
• center
• right
• bottomLeft
• bottom
• bottomRight

x

요소의 왼쪽으로부터의 떨어진 거리이다. (단위: px)

y

요소의 위로부터의 떨어진 거리이다. (단위: px)

 

options

여러가지 옵션들이 있다. 동시에 여러개를 누르거나 타임 아웃, 같이 누를 키를 설정할 수 있다. 세부내용은 아래를 참고.

https://docs.cypress.io/api/commands/rightclick#Arguments

rightclick | Cypress Documentation

 

Example

describe('holee-contextmenu basic test code', () => {
  beforeEach(() => {
    cy.visit('/');
  });
  it('Render contextmenu, when right-clicking on the (10px, 10px) position of the .red-box', () => {
    cy.get('.holee-menu').should('not.exist');
    cy.get('.red-box').rightclick(10, 10);
    cy.get('.holee-menu').should('exist');
  });
  it('Render contextmenu, when right-clicking on the (200px, 100px) position of the .red-box', () => {
    cy.get('.holee-menu').should('not.exist');
    cy.get('.red-box').rightclick(200, 100);
    cy.get('.holee-menu').should('exist');
  });
});