2023-06-25

百分は一見に如かず

今のマンションにはオートロックをそのまま開けた状態にしている人がいる。しかもこのマンションではそういう人は多いみたいだ。

このマンションは防犯によい物件かとおもったのだが、結局のところ、一部の住民によってそれがなされていない。僕と同じように、防犯性を理由に借りようと思った人がいたとしたら、納得行かなかったことだろう。

こういうのは事前に知れると良いのだけど、どうやってそれを知れるのだろうか。

僕が今住んでいるこのマンションの地域は治安が悪いというネットの口コミはなかったし、むしろ平和と書かれていることが多かった。

ただ住んでみていろんなマナー違反や不法行為などを目にすることが多かった。

自分に関することについてはさすがに管理会社に報告をした。ただ、報告するたびに新しい事象が出てきて私と妻ともども疲れ切ってしまった。

思うに、この町の住民にはそういったことが普通のことのようなのだ。

だからオートロックを開けっぱなしにしても、特に気にも留めないようだ。

おそらく、多様性の観点から、この価値観は決して誤りではない。

僕が言いたいことは、口コミだけを信じて町の治安を測ろうと思ってはいけない、ということだ。

2023-06-17

playwrightで複数newPageを開く試験において、newPageをcloseしたら動作が早くなった

起こったこと

playwrightの速度を早くしたい。

表題の通りだが、newPageをcloseしたら早くなった

コード

test("test", async ({ page, context }) => {
  const list = ["ここをクリック", "ここもクリック", "あそこもクリック"]
  for (let text of list ) {
    const [newPage] = await Promise.all([
      page.waitForEvent("popup"),
      page.getByText(text).click()
    ]);
    await expect(newPage).toHaveUrl("/test");
    await newPage.close();
  }
});

新規ページを開きまくるというテストというのがそもそも微妙なのかもしれない・・・

2023-06-11

phaser3でSpriteに自前のサブクラスのSceneを渡したい

version

    "phaser": "^3.60.0"

起こったこと

Phaser.Sceneを継承したサブクラスのGameSceneがある。

これをSpriteのコンストラクタで渡したいときに行った方法は以下の通り

export class GameScene extends Phaser.Scene {
  // 省略
}
export class BaseEnemy extends Phaser.Physics.Arcade.Sprite {
  public declare scene: GameScene; // ここを追加
  constructor(scene: GameScene, x: number, y: number, textureId: string) {
    super(scene, x, y, textureId);
    this.scene = scene; // ここを追加
  }
}

2023-06-04

mermaidでフローチャート図を触る

mermaidとは

マークダウンっぽい言語で図表を表示できる。

mermaid.js.org

シーケンス図やクラス図などを作れる。今回はフローチャート図を作ってみる。

このように書く

sequenceDiagram

    actor player as プレイヤー
    participant main as ゲーム画面
    participant game as ゲーム制御プログラム
    participant enemyData as 敵パラメータ

    player ->> main: ゲーム開始ボタンを押す
    main ->> game: ゲームプログラムロード
    game --) enemyData: AJAXでデータロード
    game ->> main: ゲームロード終了通知
    main ->> player: ゲーム画面提供

このように書くと以下のような表が生成される。

mermaidは人やオブジェクトを宣言するフェーズと人とオブジェクトを矢印で結ぶフェーズで別れる。

最初の部分が人、オブジェクトを宣言するフェーズ

    actor player as プレイヤー
    participant main as ゲーム画面
    participant game as ゲーム制御プログラム
    participant enemyData as 敵パラメータ

これがオブジェクトを結ぶフェーズ

    player ->> main: ゲーム開始ボタンを押す
    main ->> game: ゲームプログラムロード
    game --) enemyData: AJAXでデータロード
    game ->> main: ゲームロード終了通知
    main ->> player: ゲーム画面提供

詳しい書き方はドキュメントを参考にしてください。

mermaid.js.org

vscordで書く場合

マークダウンのプレビュー機能を追加できる拡張機能を使うとよい。

marketplace.visualstudio.com

2023-05-27

PlayWrightのDEBUGモード

PlayWright TypeScript

version

"@playwright/test": "^1.34.0"

起こったこと

Playwrightで特定のブラウザだけおかしい挙動しているように見えた。

まずはそれが事実か確認するために、そのブラウザでの動きを確認したい。

デバッグモードの起動方法

playwright.dev

デバッグモードの起動方法はこれ

$ npx playwright test --debug

playwright.dev

各ブラウザで実行するにはこう

$ npx playwright test --project=chromium --debug

2023-05-21

PlayWrightにisMobileがあった

PlayWright TypeScript

Version情報

"@playwright/test": "^1.34.0"
"parcel-bundler": "^1.12.5",
"typescript": "^5.0.4"

起こったこと

PCとスマホで要素が異なるサイトをE2Eテストしたい。

PlayWrightでスマホ版を動かさないといけない。

そんな中、PlayWrightのテスト内パラメータに「isMobile」があるということがわかった。

ドキュメント

playwright.dev

こんな感じ

ページはスマホビューだとお知らせ（スマホ）、PCビューだとお知らせ（PC）と表示されるとする。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .element {
      display: none;
    }

    @media (max-width: 767px) {
      .element-sp {
        display: block;
      }
    }

    @media (min-width: 768px) {
      .element-pc {
        display: block;
      }
    }
  </style>
  <title>Document</title>
</head>

<body>
  <div class="element element-pc">お知らせ（PC）</div>
  <div class="element element-sp">お知らせ（スマホ）</div>
</body>

</html>

Playwrightコンフィグでモバイルのエミュレータの設定を行う

...
  projects: [
    {
      name: "chromium",
      use: {
        ...devices["Desktop Chrome"],
      },
    },
    {
      name: "Mobile Chrome", // この辺り
      use: {
        ...devices["Pixel 5"],
      },
    },
  ],
...

テストコードはこのような感じ

import { test, expect, Page } from "@playwright/test";

test.beforeEach(async ({ page }) => {
  await page.goto("/sp.html");
});

test("お知らせのテスト", async ({ page, isMobile }) => { // isMobileを使用する
  if (isMobile) {
    const notice = page.locator(".element-sp");
    await expect(notice).toHaveText("お知らせ（スマホ）");
  } else {
    const notice = page.locator(".element-pc");
    await expect(notice).toHaveText("お知らせ（PC）");
  }
});

ページオブジェクトモデルの場合、コンストラクタにisMobileのパラメータを渡すとよいのかもしれない

2023-05-13

PlayWrightでlocatorの特定のクラスが外れるのを待つ

起こったこと

特定の要素をクリックしたい。だが、その要素が特定のClassを持っているときにクリックするとやりたいことが出来ない。

例えば「hide」というクラスを持っていて、その時にクリックしても想定していることが起こらない。

そのため、この要素が持つhideクラスが消えるまでクリックする動作を待機させたい

とにかく待つ

対象ロケーターを取得、if文を使ってとにかく待つという方針にした。

const button = page.locator('text="ボタン"');
if (!(await button.getAttribute("class")).includes("hide") {
  await page.waitForTimeout(0.1 * 1000);
}