nottyo

describe('login with session', () => {
  beforeEach(() => {
    // login once for all test cases and preserve its login session.
    cy.lineLoginWithSession(Cypress.env('email'), Cypress.env('password'));
    cy.visit(Cypress.config('baseUrl'));
  });

  it('render profileUrl', () => {
    cy.get('img[alt="profileUrl"]').should('be.visible');
  });

nottyo

Cypress.Commands.add('lineLoginWithSession', (email, password) => {
  // v2 with session cache
  const args = { email, password };
  cy.intercept({
    method: 'POST',
    url: 'https://api.line.me/oauth2/v2.1/token',
  }).as('createToken');
  cy.session(
    // use email, password as a session cache key
    args,

nottyo

Cypress.Commands.add('lineLoginWithoutSession', (email, password) => {
  const args = { email, password };
  // intercept token request for checking if it's success
  cy.intercept({
    method: 'POST',
    url: 'https://api.line.me/oauth2/v2.1/token',
  }).as('createToken');
  cy.visit(Cypress.config('baseUrl'));
  cy.get('[data-testid="login"]').click();
  cy.origin('https://access.line.me', { args }, ({ email, password }) => {

nottyo

describe('simple login', () => {
  beforeEach(() => {
    // do login before each test case so number of login = number of test cases
    cy.lineLoginWithoutSession(Cypress.env('email'), Cypress.env('password'));
  });

  it('render profileUrl', () => {
    cy.get('img[alt="profileUrl"]').should('be.visible');
  });

nottyo

describe('Simple Line Login', () => {
  it('login without optimization', () => {
    const args = { email: Cypress.env('email'), password: Cypress.env('password') };
    cy.visit(Cypress.config('baseUrl'));
    cy.get('[data-testid="login"]').click();
    cy.origin('https://access.line.me', { args }, ({ email, password }) => {
      cy.get('input[type="text"]').type(email);
      cy.get('input[type="password"]').type(password);
      cy.get('button[type="submit"]').click();
    });

nottyo

import { useEffect, useState } from "react";
import liff from "@line/liff";
import "./App.css";

function App() {
  const [message, setMessage] = useState("");
  const [data, setData] = useState({
    isInLineInAppBrowser: false
  });
  const [error, setError] = useState("");

nottyo

const { userAgent } = navigator;
const isInLineInAppBrowser = !liff.isInClient() && userAgent.includes('Line');

nottyo

import { BrowserMultiFormatReader } from '@zxing/browser';

const reader = new BrowserMultiFormatReader();

Cypress.Commands.add('readCode', { prevSubject: true }, (subject) => {
  const img = subject[0];
  const image = new Image();
  image.width = img.width;
  image.height = img.height;
  image.src = img.src;

nottyo

describe('QR Code', () => {
  it('can read qrcode', () => {
    cy.visit('./qrcode.html');
    cy.get('[data-testid="qr-code-img"]')
      .then($el => {
        const img = $el[0];
        const image = new Image();
        image.width = img.width;
        image.height = img.height;
        image.src = img.src;

nottyo

{
    "plugins": [
        "test-selectors"
    ],
    "extends": [
        "react-app",
        "react-app/jest",
        "plugin:test-selectors/recommendedWithErrors"
    ],
    "rules": {