What is the Page Object Pattern

https://webdriver.io/docs/pageobjects/

Page Object Pattern is one of the software programming principle which encapsulate page manipulation logic that tend to harm readability and maintainability in software tests.

Software test involves two kinds of cods below.

• test code : e.g. Shows error messages when invalid email is typed in form.
• manipulation code to reproduce test situation : e.g. Shows page then type email

Page Object Pattern aims to move the latter codes to page class, which is called Page Object, to help software engineers read and write the former codes easily.

The example of Page Object Pattern

Let’s see https://webdriver.io/docs/pageobjects/

// Page class has E2E test instance which comes from test library such as selenium.
import Page from './page'

class LoginPage extends Page {

    // Defines some functions to manipulate page to reproduce test situation.
    get username () { return $('#username') }
    get password () { return $('#password') }
    get submitBtn () { return $('form button[type="submit"]') }
    get flash () { return $('#flash') }
    get headerLinks () { return $$('#header a') }

    async open () {
        await super.open('login')
    }

    async submit () {
        await this.submitBtn.click()
    }

}

export default new LoginPage()

By using this page instance to prepare test cases, we can make test codes simple.

it('should deny access with wrong creds', async () => {
    await LoginPage.open()
    await LoginPage.username.setValue('foo')
    await LoginPage.password.setValue('bar')
    await LoginPage.submit()

    await expect(LoginPage.flash).toHaveText('Your username is invalid!')
})

How to use Page Object Pattern in React Component tests

import type { ComponentProps } from "react";
import { render } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import LoginForm from "./LoginForm";

type Props = ComponentProps<typeof LoginForm>

const setup = (props): Props => {
  const { getByRole, getByLabelText, getByText } = render(<LoginForm {...props} />);
  return {
    typeEmail: (email: string) => userEvent.type(getByLabelText("email"), email),
    getByText,
    submit: () => userEvent.click(getByRole("button"))
  };
};


it("When email typed is invalid, shows error message.", () => {
  const utils = setup();
  utils.typeEmail("invalidemail");
  utils.submit();

  expect(utils.getByText("Email is not correct.")). toBeInTheDocument();
});

Page Object Pattern とは

https://webdriver.io/docs/pageobjects/

E2E テストでは、以下2つのコードが混在することになり、テストがしたいことがぱっと見でわかりにくいことがあります。

• テストコード（例：フォームにinvalidなemailが入力されている場合、エラーが表示すること
• テストするためにページを操作するコード（例：フォームに文字を入力または、フォームのエラー文字を取得）

さらに、 テストするためにページを操作するコード が点在していると、フォームの id や name を修正しただけで、点在するコードをすべて修正することになりメンテナンス性も損なわれがちです。

Page Object Pattern では、テストするためにページを操作するコード を オブジェクトでひとまとめにして、使い回すことで、テストの可読性やメンテナンス性を上げる方法です。

Page Object Pattern の例

https://webdriver.io/docs/pageobjects/ の例をそのまま利用すると、、

// selenium など E2E テストライブのインスタンスを保持する親クラス
import Page from './page'

class LoginPage extends Page {

    // ログインページのテストで使う `テストするためにページを操作するコード`
    get username () { return $('#username') }
    get password () { return $('#password') }
    get submitBtn () { return $('form button[type="submit"]') }
    get flash () { return $('#flash') }
    get headerLinks () { return $$('#header a') }

    async open () {
        await super.open('login')
    }

    async submit () {
        await this.submitBtn.click()
    }

}

export default new LoginPage()

これを、テストコードで使いまわしますことで、 テストするためにページを操作するコード がシンプルになり、テストコードが読みやすく、またページに変更があっても Page Object を修正するだけで済み、テストコードへの影響を抑えることができます。

it('should deny access with wrong creds', async () => {
    await LoginPage.open()
    await LoginPage.username.setValue('foo')
    await LoginPage.password.setValue('bar')
    await LoginPage.submit()

    await expect(LoginPage.flash).toHaveText('Your username is invalid!')
})

React Component テストで Page Object Pattern を 利用する

import type { ComponentProps } from "react";
import { render } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import LoginForm from "./LoginForm";

type Props = ComponentProps<typeof LoginForm>

const setup = (props): Props => {
  const { getByRole, getByLabelText, getByText } = render(<LoginForm {...props} />);
  return {
    typeEmail: (email: string) => userEvent.type(getByLabelText("email"), email),
    getByText,
    submit: () => userEvent.click(getByRole("button"))
  };
};


it("invalidなemailの場合、エラーを表示する。", () => {
  const utils = setup();
  utils.typeEmail("invalidemail");
  utils.submit();

  expect(utils.getByText("Emailが正しくありません。")). toBeInTheDocument();
});

Shopify App Node は、公式に Heroku にデプロイする方法が提供されています。しかし、個人的に Heroku は、費用が高いのと DB や CDN などインフラ、ミドルウェアを追加するたびに様々なサービスを連携させるのが好みではなく、包括的にインフラを構築できる Google Could Platform または Firebase で方法を模索していました。その過程と結論を残しておこうと思います。

構成案1： Firebase Hosting and Functions

まずは、一番はじめに思いつく素直な構成です。

Firebase Hosting で Functions を rewrite してあげて、/auth や /webhooks 、html を配信する構成です。
html の配信で Hosting を使わない理由は、Shopify App Node でもページへアクセスした場合に、アプリをインストール済みかどうか判定して、必要であれば OAuth へリダイレクトするロジックを html 配信の前に実行するためです。

結論

結論として、この構成案ではうまくいきませんでした。
Shopify App Node はその仕組上、2つの HTTP Cookie を使います。しかし、すべての endpoint を束ねている Firebase Hosting は HTTP Cookie を例外を除いて利用できません。よって Shopify App Node は期待通り動きませんでした。

ちなみに Firebase Hosting でも使える唯一の例外 Cookie 名である __session を Shopify App Node がセッション管理に使う shopify_app_session の代わりに使う案も考えました。

Shopify.Auth.SESSION_COOKIE_NAME = "shopify_app_session";

しかし、これでもうまくいきませんでした。 Cookie 生成ロジックを持ってる @shopify/shopify-api は Cookie の操作に cookies というモジュールを利用しています。このモジュールでは暗号化 cookie を生成する際に、Cookie 名の最後に .sig をつける処理が含まれています。つまり shopify_app_session という Cookie 名をセットしても、 shopify_app_session.sig になってしまい、Firebase Hosting が許可しない Cookie 名で使えませんでした。

構成案2：/auth だけ Firebase Hosting を使わない

構成案1の問題点である、「Cookie が使えない」という部分に対処した構成です。
Shopify App Node が使う Cookie は /auth の endpoint でセットされます。よってこの endpoint のみ Firebase Hosting を通さなければうまくいくはずです。

)

結論

この構成でもうまくいきませんでした。
OAuth 認証をする際に、 /auth へリダイレクトする処理ですが、一見すると、 ×××.web.app/index.html から us-central1-×××.cloudfunctions.net/auth にリダイレクトでうまくいきそうでしたが、できませんでした。

Firebase Hosting で rewrite しているとはいえ、すべての function の実態は us-central1-×××.cloudfunctions.net にあります。
つまり、index.html を返している functions から見れば、 us-central1-×××.cloudfunctions.net/index.html へのリクエストを us-central1-×××.cloudfunctions.net/auth にリダイレクトすることになります。

詳しく仕様までは追えていませんでしたが、 同一ドメインのリダイレクトは、たとえ明示的にドメインを指定しても省略される ようです。
つまり、 us-central1-×××.cloudfunctions.net/index.html へのリクエストを us-central1-×××.cloudfunctions.net/auth にリダイレクトする処理を書いても、 /auth （ドメインを除いたパスだけ）へリダイレクトする HTTP レスポンスを返します。

そのまま、Firebase Hosting を通ってブラウザにレスポンスが戻るので結果、×××.web.app/index.htm のリクエストで認証するためにリダイレクトすると ×××.web.app/auth へリダイレクトするレスポンスが返ってしまい、Firebase Hosting を使っていない /auth へリクエストをリダイレクトさせることができませんでした。

よってこの構成案もボツです。

構成案3：Firebase Hosting の rewrite を使わない

諸悪の根源が Firebase Hosting の rewrite なのでそれを一切つかない構成です。

結論

成功！動きました。Firebase Hosting で rewrite させる構成より、ローカルも本番環境も少し複雑になりますが、動かくことは問題なさそうです。しかし、せっかく、Firebse Hosting で HTTPS のドメイン（×××.web.app）があるのに使えないのがもったいない気がします。

構成案4：OAuth認証の endpoint のみ Cloud Functions を使う

何かと問題になる /auth の endpoint。
Cookie を使うために Firebase Hosting を使えず、他の Firebase Functions からリダイレクトを正しくするために別ドメインで動かす必要があります。なので、それだけ 素の Google Cloud Functions に乗せて動かす構成です。

結論

成功！動きました。 構成案4 に比べていくらか、構成がシンプルなのと Firebase Hositng のドメインをそのまま利用できるのが良い点です。

欠点は、ローカル、本番環境ともに Google Cloud Functions と Firebase Functions を用意する必要があるのでぱっとみわかりにくい点。
Google Cloud Functions である /auth のシステムは、認証終わったあとの戻し先として Firebase Functions のドメインを知る必要があり、また、Firebase Functions は、認証する際に /auth である Google Cloud Functions のドメインをしる必要があるので、インフラがお互いに依存している点が気になるところです。

まとめ

• 構成案3：Firebase Hosting の rewrite を使わない
• 構成案4：OAuth認証の endpoint のみ Cloud Functions を使う

のどちらがいいかは、好みの問題なので好きな方を使えばいいかと思います！]]> 2022-06-22T00:00:00.000Z ja-JP-two-http-cookies-shopify-app-node-uses 2022-08-01T00:00:00.000Z

.section {
  content-visibility: auto;
}

CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '<color>',
  initialValue: 'magenta',
  inherits: false
});

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

const { readable, writable } = new TransformStream();

const responsePromise = fetch(url, {
  method: 'POST',
  body: readable,
});

try {
  const first = await Promise.any(arrayOfPromises);
  console.log(first);
} catch (error) {
  console.log(error.errors);
}

const myName = 'My name is Bond, James Bond.'
    .replaceAll('Bond', 'Powers')
    .replace('James', 'Austin');
console.log(myName);
// My name is Powers, Austin Powers.

const sheet = new CSSStyleSheet();
sheet.insertRule(`h1 {
  background: pink;
  text-transform: uppercase;
}`)
document.adoptedStyleSheets = [sheet];

"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  },
]

const registration = await navigator.serviceWorker.ready;
await registration.index.add({
  id: 'article-123',
  url: '/articles/123',
  launchUrl: '/articles/123',
  title: 'Article title',
  description: 'Amazing article about things!',
  icons: [{
    src: '/img/article-123.png',
    sizes: '64x64',
    type: 'image/png',
  }],
});

// Request the wake lock
const wl = await navigator.wakeLock.request('screen');

// Release the wake lock
wl.release();

@media (max-width: ◯◯px) {
  // 画面サイズが◯◯px以下に適用
}

@media (min-width: ◯◯px) {
  // 画面サイズが◯◯px以上に適用
}

// sample.scss
.awesome-container {
  xxx: xxxx;
  xxx: xxxx;

  @media (min-width: 100px) {
    // 画面サイズが100px以上に適用
  }

  @media (min-width: 300px) {
    // 画面サイズが300px以上に適用
  }

  @media (min-width: 500px) {
    // 画面サイズが500px以上に適用
  }
}

.awesome-panel {
  // 画面サイズが401px以上はabsolute
  position: absolute:

  @media (max-width: 400px) {
    // 画面サイズが400px以下ならpositionの初期値（static）でpositionをキャンセルする
    position: static;
  }
}

.awesome-panel {
  // 画面サイズが400px未満
  // position: static: ←初期値なので記述不要

  @media (min-width: 400px) {
    // 画面サイズが400px以上ならabsolute
    position: absolute;
  }
}

// sample.scss
.awesome-container {
  xxx: xxxx;
  xxx: xxxx;

  @media (min-width: 100px) {
    // 画面サイズが100px以上に適用
  }

  @media (min-width: 300px) {
    // 画面サイズが300px以上に適用
  }

  @media (min-width: 500px) {
    // 画面サイズが500px以上に適用
  }
}

<!-- example.com でのコメント投稿機能 -->
<form method="POST" action="https://example.com/comments">
  <textarea placeholder="コメントを入力" name="body" rows="5" cols="33">
  <button>コメント送信</button>
</form>

<!-- example.net （.netなので無関係のサイト）からの、example.com のコメント投稿機能を悪用したいたずら -->
<form style="display: none;" method="POST" action="https://example.com/comments">
  <textarea value="だれかの悪口。だれかの悪口。だれかの悪口。だれかの悪口。だれかの悪口。だれかの悪口。だれかの悪口。">
  <button>コメント送信</button>
</form>

/* スマホスタイル */
/* .... */
@media (min-width: 768px) {
  /* タブレットスタイル */
  /* .... */
}
@media (min-width: 1024px) {
  /* パソコンスタイル */
  /* .... */
}

/* プライマリーがタッチスクリーンのような正確なポインターがないディバイスの場合 */
@media (pointer: coarse) {
}

/* プライマリーがマウスのような正確なポインターがあるディバイスの場合 */
@media (pointer: fine) {
}

/* coarseやfineでもない場合 */
@media (pointer: none) {
}

/* プライマリー入力ディバイスがhoverを使える場合 */
@media (hover: hover) {
}

/* プライマリー入力ディバイスがhoverを使えない場合 */
@media (hover: none) {
}

/* 入力ディバイスのいずれかに、タッチスクリーンなどポインター精度の低いものが含まれる場合 */
@media (any-pointer: coarse) {
}

/* 入力ディバイスのいずれかに、マウスなどポインター精度が高いものが含まれる場合 */
@media (any-pointer: fine) {
}

/* 上記以外 */
@media (any-pointer: none) {
}

/* 入力ディバイスのいずれかに、hover可能なものが含まれる場合 */
@media (any-hover: hover) {
}

/* 入力ディバイスのいずれかに、hover不可能なものが含まれる場合 */
@media (any-hover: none) {
}

window.matchMedia("(any-hover: coarse)").matches
// true or false

It is difficult to tell what’s going on… I was trying to open dropdown menu but It didn’t work correctly.

What’s the matter?

When I use laptop the dropdown menu works!!!

When I use mobile the dropdown menu works correctly too.
This is because most of mobile browser treat tapping and after tapping state as :hover CSS pseudo-class so if the hover based dropdown menu is implemented using :hover it’s works!!!!!

I wrote blog about this in my past blog post plz check more details.

How to set :active style to button in mobile

But it doesn’t seems that Edge browser on Surface go treats tapping and after tapping state as :hover.

browser	hover	taping	after tapping
Edge on surface go	-	:active	:focus
mobile Safari	-	:active	:hover

demo site

What should we do?

whether the browser treat tapping and after tapping state as :hover CSS pseudo-class or not is different in browsers so we need to detect that users use input device that works :hover or not.

Common mistake

/* for mobile style */
/* .... */
@media (min-width: 768px) {
  /* for tablet style */
  /* .... */
}
@media (min-width: 1024px) {
  /* for laptop style */
  /* .... */
}

The common mistake is separating style based on device width using min-width or max-width media query then you avoid to use :hover CSS pseudo based UI on tablet device.
In this way you don’t consider…

• Device has tablet width and works :hover
• Device has laptop width but doesn’t work :hover

For example MS Edge on Surface Go has same width as table but doesn’t work :hover CSS pseudo…

How do we detect the devices?

We can detect devices which work :hover and devices which don't work :hover by using Interaction Media Features specs below.

• Pointing Device Quality
• Hover Capability
• Rare Interaction Capabilities

Prior knowledge

Devices can connect multiple input device such as mouse or tablet pen with touch screen device.

Pointing Device Quality

This is a kind of media query to detect accuracy of the user’s primary pointing device.

/* if user's primary input device includes a pointing device of limited accuracy */
@media (pointer: coarse) {
}

/* if user's primary input device includes a accurate pointing device */
@media (pointer: fine) {
}

/* no pointing device */
@media (pointer: none) {
}

Hover Capability

This is a kind of media query to detect hoverable of the user’s primary pointing device.

/* if user's primary input device includes a hoverable device */
@media (hover: hover) {
}

/* if user's primary input device doesn't includes a hoverable device */
@media (hover: none) {
}

Rare Interaction Capabilities

Pointing Device Quality and Hover Capability detect the capability of primary input device only so if user connect multiple input devices (like secondary input) those will be ignored.
On the other hand, You can detect those capabilities by using any-pointer and any-hover media queries.
Those detection are based on multiple input devices.

/* if user's primary input device includes "any" pointing device of limited accuracy */
@media (any-pointer: coarse) {
}

/* if user's primary input device includes "any" accurate pointing device */
@media (any-pointer: fine) {
}

/* no pointing device */
@media (any-pointer: none) {
}

/* if user's primary input device includes "any" hoverable device */
@media (any-hover: hover) {
}

/* if user's primary input device doesn't includes "any" hoverable device */
@media (any-hover: none) {
}

Rare Interaction Capabilities could match multiple queries because it is based on multiple input devices.
For example, The query result of Surface go with tablet pen is below.

• @media (poiner: fine)： because of tablet pen
• @media (hover: hover)： because of tablet pen
• @media (any-pointer: fine) and @media (any-pointer: coarse)： because of tablet pen(fine) and touch screen (coarse)
• @media (any-hover: hover) because of tablet pen

note: surface tablet pen can hover on elements

Plz check more detail and full of result of those queries below!!!!
Interaction Media Features and their potential

How can we use it?

• @media (pointer: coarse) It might be better to make buttons bigger to tap easier
• @media (hover: none) It might be better to make other UI instead of hover one

But those queries don’t consider multiple input device so it could be better to use any-pointer and any-hover.
If you want your UI to adapt user’s input device…

• @media (any-pointer: coarse) It might be better to make other UI instead of hover one

How to query in JavaScript

You can use matchMedia too in JavaScript.

window.matchMedia("(any-hover: coarse)").matches
// true or false

Notes

@media (hover: on-demand) and @media (any-hover: on-demand) are old specs so those are deprecated.

Remove “on-demand” value for hover/any-hover media queries. (removed)

References

• Touch Devices Should Not Be Judged By Their Size