#36 Cypress覚え書き

QAマガジンを更新するのがだいぶ久しぶりになってしまいました。反省

最近は諸々Cypressを触る機会が多かったもので、せっかくなら詰まったところとか、後で役立ちそうなことをメモしておこうと思います。

Cypressとは

---

Testing Frameworks for Javascript | Write, Run, Debug | Cypress

E2Eテストの自動化フレームワークの1つ。node環境で動作し、OSS（オープンソース）なので無料で利用できる。JavaScriptベースでのコーディングとなる。

また、その他のE2Eテストのベースとなっていることが多いSeleniumというフレームワークには依存していない。

Selenium ：ブラウザの外部で実行され、ネットワーク経由でコマンドを実行する
Cypress ：ブラウザ内で、アプリケーションと同じランタイムで実行される

上記が大きな差と言える。因みにCypressを直訳すると「ヒノキ」

やりたいこととその方法

---

Why Cypress? | Cypress Documentation

基本は上記のドキュメントを参照してくださいませ。

0.環境

  "dependencies": {
    "@testing-library/cypress": "^8.0.3",
    "cypress": "^10.4.0",
    "typescript": "^4.7.4",
    "cypress-xpath": "^2.0.1",
  }

要素の取得にはXpath/Typescriptを利用しています。（相対Pathが使えるのと個人的な趣味趣向です）

1.Basic認証を突破したいとき

  before(() => {
    // TOPを開く
    cy.visit('https://*******.com', {
      auth: {
        username: Cypress.env('USER'),
        password: Cypress.env('PASSWORD')
      },
    })
  });

2.値をit間で受け渡したいとき

describe('テスト', () => {
  let aaa: string;

  context('値を取得する',() => {
     it('文字列を取得する', () => {
      cy.xpath('//span[contains(text(),"おはよう")]')
        .then(($bbb) => {
          aaa = $bbb.text();
      });
     })
  });

  context('値を使う',() => {
    it('取得した値を探す', () => {
      cy.xpath(`//span[contains(text(),${aaa})]`).should('exist')
    })
  });
})

3.画面の大きさを固定する方法

  beforeEach(() => {
    cy.viewport(1280, 720)
  });

もっと良い方法ありそう・・・

最後に

---

以上で、覚書とします。20時間程度くらいしか触れておりませんが、それでも1つのシナリオが動くところまでは持って行けたので、結構使いやすいフレームワークなのでは？と思っています。

今後もちょこちょこ触っていこうと思いますので、なにかあればこのnoteを更新したり、新しいnoteを書こうと思います！