CypressでGoogleのOAuth認証のログインをする

git clone https://github.com/auth0-samples/auth0-react-samples.git

# サンプルアプリのルートディレクトリに移動
cd auth0-react-samples/Sample-01

touch src/auth_config.json

{
  "domain": "<Your Auth0 Domain>",
  "clientId": "<Your Auth0 Client ID>"
}

npm install
npm run dev

# Cypressがインストールされているリポジトリに移動
cd your-installed-cypress-project

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  // 妨害するサードパーティコードの変更を有効にする
  // Doc: https://docs.cypress.io/guides/guides/web-security#Modifying-Obstructive-Third-Party-Code
  experimentalModifyObstructiveThirdPartyCode: true,
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
});

{
  "BASE_URL": "http://localhost:3000",
  "AUTH0_DOMAIN": "<Your Auth0 Domain>",
  "GOOGLE_USERNAME": "<Your Google Account Username>",
  "GOOGLE_PASSWORD": "<Your Google Account Password>",
}

// Googleログイン用の関数
function loginToGoogle(username, password) {
  Cypress.on(
    'uncaught:exception',
    (err) =>
      !err.message.includes('ResizeObserver loop') &&
      !err.message.includes('Error in protected function')
  );

  cy.visit(Cypress.env('BASE_URL'));

  cy.get('#qsLoginBtn').click();

  // Auth0のログインページでGoogleボタンをクリック
  // doc: https://docs.cypress.io/api/commands/origin
  cy.origin(Cypress.env('AUTH0_DOMAIN'), () => {
    cy.scrollTo('bottom');
    cy.get('form[data-provider="google"]').submit();
  });

  // Googleのログインページでユーザー名とパスワードを入力
  // doc: https://docs.cypress.io/api/commands/origin
  cy.origin(
    'https://accounts.google.com',
    {
      args: {
        username,
        password,
      },
    },
    ({ username, password }) => {
      Cypress.on(
        'uncaught:exception',
        (err) =>
          !err.message.includes('ResizeObserver loop') &&
          !err.message.includes('Error in protected function')
      );

      cy.get('input[type="email"]').type(username, { log: false });
      // NOTE: 要素はフォームに存在するが、非表示になって再レンダリングされるためwait()を追加
      cy.contains('次へ').click().wait(4000);

      cy.get('[type="password"]').type(password, { log: false });
      cy.contains('次へ').click().wait(4000);
    }
  );

  // ログイン時に表示されるプロフィールドロップダウンが存在することを確認
  cy.get('#profileDropDown').should('exist');
}

// OAuth経由でログインする関数
export function loginViaOAuth(provider) {
  switch (provider) {
    case 'google':
      loginToGoogle(
        // cypress.env.json に設定したGoogleのログイン情報を使う
        Cypress.env('GOOGLE_USERNAME'),
        Cypress.env('GOOGLE_PASSWORD')
      );
      break;
      // NOTE: ここに他のプロバイダーの認証を追加できる
    default:
      throw new Error('no provider configured!');
  }
}

describe('Google Login Demo', () => {
  beforeEach(() => {
    // GoogleのOAuth認証を実施
    cy.loginViaOAuth('google')
  })

  it('shows logged in user profile page', () => {
    cy.visit('http://localhost:3000/profile')
    cy.location('pathname').should('eq', '/profile')
    cy.contains(Cypress.env('GOOGLE_USERNAME')).should('exist')
  })
})

import { loginViaOAuth } from './oauth-login';

Cypress.Commands.add('loginViaOAuth', (provider) => {
  cy.log(`loginViaOAuth : ${provider}`);

  // cy.sessionを使ってログイン情報をキャッシュ
  // Doc: https://docs.cypress.io/api/commands/session
  cy.session(`oauth-${provider}`,
    () => loginViaOAuth(provider),
    {
      // ログイン時のプロフィールドロップダウンが表示されていない場合
      // loginViaOAuth(provider) を実行する
      validate: () => {
        cy.visit(Cypress.env('BASE_URL'))
        cy.get('#profileDropDown').should('exist')
      },
    }
  );
});