c29130811

https://playwright.dev/ Fast and reliable end-to-end testing for modern web apps | PlaywrightCross-browser end-to-end testing for modern web appsplaywright.dev Microsoft에서 개발한 브라우져 테스트 및 웹 스크래핑을 위한 라이브러리https://npmtrends.com/cypress-vs-playwright npm trends에서 많이 올라왔는데, 개인적으로는 webkit 지원이 제일 크지않나 싶다.아직도 cypress는 webkit이 실험중이기도 하고... Launching Browsers | Cypress DocumentationWhen you run tests in C..

Chatgpt를 구워 삶아 설정한 github actions의 xml 파일  다시 Cypress를 쓰는 시간이 도래했다. Cypress Project를 설정 하면서 원했던 생각한 플로우는 다음과 같다. Slack에서 Command 봇으로 Github Actions를 트리거한다.Github Actions 에서 Chrome, Edge 최소한 2개 이상 브라우져에서 테스트를 한다.테스트 결과를 다시 Slack 으로 돌려 받는다.물론 Cypress Cloud 쓸경우 record 하면 더 편하긴한데.. 난 가난해 여튼 그래서 시작한 이틀간의 대장정? github actions의 workflow를 쓰자그리고 봇을 만들자 봇 그까잇거 대애충 만들어서 slack commands를 만들고, bolt.js를 쓰는데, 요 ..

Github Action은 CI/CD 즉 지속적인 통합/ 배포을 지원해주는 서비스로, 빌드, 테스트 릴리즈를 할 수 있게 도와준다. cypress 에 공식 문서에서도 볼 수 있듯이, github actions를 통해 테스트를 CI/CD 를 통해 할 수 있게 끔 지원해준다. https://docs.cypress.io/guides/continuous-integration/github-actions GitHub Actions | Cypress Documentation What you'll learn docs.cypress.io 사실 꼭 github actions가 아니더라도, circleCI, gitlab CI, AWS CodeBild 등 여러가지로 할 수 있다. github actions는 무료로 2,000..

POM (Page Object Model)로 자동화 테스트 스크립트를 작성할 때 사용하는 모델이다. 우리가 작성하는 테스트 스크립트를 테스트 페이지 별로 관리하는 형태인거 같다. 참고 자료 https://medium.com/nerd-for-tech/cypress-page-object-model-953791736972 Cypress Page Object Model Page Object Model, also known as POM, is a design pattern that creates an object repository for storing all web elements. It is useful in… medium.com https://www.youtube.com/watch?v=bC9bGHDgpQk ..

docs.cypress.io/guides/references/best-practices Best Practices | Cypress Documentation Real World Practices The Cypress team maintains the Real World App (RWA), a full stack example application that demonstrates best practices and scalable docs.cypress.io 보통, 자동화를 시작하게 되면 selector부터 찾다가 선택할 수 없는 값이 없다면 대게 Xpath를 사용하게 되는 거 같다. * Xpath 사용법 (바로가기) 하지만 개인적으로 Xpath는 의미(semantic)를 파악하기 쉽지 않으며, tag가 달..

테스트 하려는 web에서 파일 업로드가 있는 경우, 아래 npm 모듈을 통해 지원이 가능하다. www.npmjs.com/package/cypress-file-upload cypress-file-uploadA Cypress command for file uploadwww.npmjs.com각 여러가지 형태로 지원이 된다.  // HTML5 file inputcy.get('[data-cy="file-input"]') .attachFile('myfixture.json');// Attaching multiple filescy.get('[data-cy="file-input"]') .attachFile(['myfixture1.json', 'myfixture2.json']);// Drag-n-drop component..

Cypress는 사용자 임의적 Command 생성 및 사용에 대해 지원을 해준다. (공식 사이트) Cypress > Support > commands.js 에 Command 를 등록 및 사용을 하면 된다. 가령 예제로, inputValue 라는 나만의 Command를 만들어볼 경우, commands.js 에 아래와 같이 등록을 한다. 등록 Cypress.Commands.add('inputValue', (selector, value) => { cy.get(selector) .type(value) .should('have.value', value) }) selector에 value 값을 입력하고, value가 출력되는지 확인하는 command를 작성 사용 it('input에 text 값이 입력되어야 한다.'..

DOM Node의 Sibling이나 Parent를 접근하려고 했었었는데, 기본 예제에는 항상 답이 있었다.cy.xpath('//a[text()="Completed Story"]/parent::div/parent::div/parent::td/following-sibling::td/button') .should(($button) => { expect($button.get(0).innerText).to.eq('Completed')}) Cypress Open을 통해 맨 처음 만들어진 예제들을 재 확인 해보면, siblings와, parent를 접근할 수 있는 것이 있었다.it('.siblings() - get all sibling DOM elements', () => { // https://on.cyp..

cypress에서 element를 접근하는 방법에 대해 알려준다. Submit Cypress Selector Recommended Notes cy.get('button').click() Never Worst - too generic, no context. cy.get('.btn.btn-large').click() Never Bad. Coupled to styling. Highly subject to change. cy.get('#main').click() Sparingly Better. But still coupled to styling or JS event listeners. cy.get('[name=submission]').click() Sparingly Coupled to the name attri..

Node 기반의 E2E Testing Framework npm trends에서 selenium 을 추격 중으로 사용이 많이 늘어나고 있는 추세 www.npmtrends.com/cypress-vs-nightwatch-vs-selenium-webdriver-vs-testcafe?fbclid=IwAR3y4Z3Hz1TYhibwvmgUCz1IA1T7AtNIiWgAoVneKc-pe8C1xNCy7LPLj4Y cypress vs nightwatch vs selenium webdriver vs testcafe | npm trends Compare npm package download statistics over time: cypress vs nightwatch vs selenium webdriver vs testcafe..