Playwrightでチェックボックスのチェックがついているラベルを取りたい

PlayWright TypeScript

version

"@playwright/test": "^1.22.2"

起こったこと

Playwrightでチェックボックスのチェックがついているラベルの値を取りたい。

以下の画像なら["チェックボックス1", "チェックボックス2"]といった値。

<form>
  <div>
      <input type="checkbox" id="checkbox1" checked>
      <label for="checkbox1">チェックボックス1</label>
  </div>
  <div>
      <input type="checkbox" id="checkbox2" checked>
      <label for="checkbox2">チェックボックス2</label>
  </div>
  <div>
      <input type="checkbox" id="checkbox3">
      <label for="checkbox3">チェックボックス3</label>
  </div>
</form>

CSSセレクタの拡張

selectorで"div:has(input:checked) > label"とする.

playwright.dev

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

test("チェックされているラベルが２つである", async ({ page }) => {
  await page.goto("/input.html");
  const checkedLabels = await page
    .locator("div:has(input:checked) > label")
    .allInnerTexts();
  expect(checkedLabels).toEqual(["チェックボックス1", "チェックボックス2"]);
});

開発したDiscordBotが起動しているのに返信がないのは権限設定をしていないからかも

Discord Node

当時のversion

"discord.js": "11.5.1"

起こったこと

会社で使用しているDiscordボットが動かなくなった。最後に動いていたのを確認したのは2022年6月ごろである。

正しくは特定の文字に反応するはずのDiscordボットが何も返信しなくなった。

権限回りに変更があった

どうもDiscordのボットについて権限回りの変更があったようだ。2022/8/31からmessage contentを取得するには権限を追加しないといけない。

support-dev.discord.com

また、この変更に対応するにはdiscord.jsをver13以降にしないといけない。そしてそのためにはNodeのVersionを16以上にしないといけない。typescriptのversionにも注意する必要がありそうだ。

権限の変更

ここで変更する。 discord.com

該当するアプリケーションを選びbotをクリックする。Privileged Gateway Intentsの項目にあるラジオボタンのうち、MESSAGE CONTENT INTENTをONにした。

コードの修正

ver13になる過程でClientクラスを作るときのコンストラクタにoptionが必要になったっぽい。また、イベントリスナとしてmessageだったものがmessageCreateになったのも変更点になる。

  const client = new Discord.Client({
    // この辺りが追加された要素。必要そうな権限だけを選んだ（と思う）ので、適宜変更してほしい
    intents: [
      GatewayIntentBits.MessageContent,
      GatewayIntentBits.GuildMessages,
      GatewayIntentBits.Guilds,
    ],
  });
  client.on("ready", (cli) => {
    console.log("ready");
  });
  // ここのmessageイベントからmessageClientイベントに変更。型もついているのでVersionを上げたらわかると思う。
  // client.on("message", (msg) => {
  client.on("messageCreate", (msg) => {
    if (msg.content === "ping") {
      msg.reply("pong");
    }
  });
  await client.login("login");

こっちも要確認

可能ならスラッシュコマンドに変更することも検討したほうがよさそうだ。

support-dev.discord.com

資格の試験会場には時計がない可能性がある

資格

起こったこと

後輩が2022年の春に応用情報技術者試験を受けに向かったが、試験会場に時計がなかったと嘆いていた。

僕自身、情報処理試験や日商簿記の試験を受けたことがあるが、試験会場に時計がなかったことが多々あった。

もちろん部屋に壁掛け時計があるケースもあったが稀なパターンだった。

時計はシンプルなもの

試験にもよると思うがおおよそはシンプルな時計じゃないと怒られる。カンニング判定にもなりかねないのでシンプルな腕時計を使用するとよい。スマートウォッチはおそらく試験中に使用できないと思われる。

100均で事足りると思うので、持っていない人は買っておくことをお勧めする。

jestでCannot find module 'nock/types' from '****.ts'と出た

jest nock typescript node

Version情報

{
    "jest": "^29.0.3",
    "nock": "^13.2.9",
}

起こったこと

jest上でimport nock from "nock/type";を行っていた時、Cannot find module 'nock/types' from '****.ts'と出た。

jestのsetup上では読み込めていたのに、*.test.ts上では上記のエラーが出た。

nock/typesじゃなくてnockでは

import nock from "nock";としたら直った。たし🦀。

- import nock from "nock/type";
+ import nock from "nock";

自分向けの単語勉強アプリを作った

起こったこと

応用情報の勉強しているが、単語がさっぱり覚えられない

試験日直前に一括で覚えるとして、どうやって勉強するかといろいろ考えたとき、PCで文章を登録できてスマホで勉強できるアプリが欲しいと思った。

また、既存のアプリは四択のものが多く、その選択肢から答えを推測できてしまう。応用情報技術者試験の午後問題では単語を記述させることが多いため、推測させるのではなく、初めから記述で回答するアプリが欲しいと思った。

作ったもの

DBを用意し、問題コンテンツを作成できるCMSを作成し、そのDBから問題を出力するアプリを作った。

問題コンテンツを作成できるCMS。

問題アプリ。

おおやけ向けに作っていないのでいくつかUI的に怪しいが動くのでいったんはこれでよし。

作るのに使用したもの

PaasはHeroku

Postgresが今現在(2022/9/24)で無料であるこということとGithubアクションで自動デプロイしたかったから、というのが理由。

なお、Herokuは2022/11/28に無料版はなくなるみたい。

blog.heroku.com

Nodejs,Express,TypeOrm

本当は作成を思い立った時からMVCフレームワークを使いたかったのだがNodejsにMVCがなかった。正確にはいくつかあったのだけど情報収集が大変そうに感じた。結局Expressを使うことにしたのだけど、Expressはわからないことを検索すればいくつか記事が出てきてくれるのでこれは正解だった。一方でコントローラーに処理を少し書いてしまっている現状がある。リファクタリングしたいけどテストコードは書いていない。絶対よくないよね、これ。

DB操作関連のものはORMを使おうと思った。SequelizeかTypeOrmかで迷ったが、TypeOrmのほうがTypescriptの型を書きやすいという情報があったのでこちらを選択した。ORMそのものが今回が初めてだった。

正直TypeOrmは大変で、ネット検索をかけても古いバージョンの記述が多く、解決するのに時間がかかることが多かった。

UIはBulma

Bulmaにしたのは経験があるから。マテリアルUIでもよかったかもしれない。よく調べずに導入してしまった。導入しておいて書くのも悪いんだけど<button class="button"></button>と要素名と同じクラス名を書くのはなんだかなぁと思った。

VSCodeとかWSL2とかDockerとか使ったらPCが重い

VSCodeでコードを書き、WSL2でLinux環境で作成し、Dockerを使ってPostgresを構築した。DockerComposeを使っているので立ち上げも閉じるのも簡単だった。ただ、メモリが6GBのPCにはこれらの環境はとても辛かった。GPU向けの1.5GBを通常のメモリ使用に変更するなどで頑張ったが、やはり仮想環境マシマシには耐えられないようだった。なお、メモリ交換をしたらハードウェアエラーを起こした。保証も切れた。最初からメモリ交換できるタイプのPCにするか、高スペックのものを用意しましょう。

作るまで何日かかったか

3週間。ただ、平日は当然仕事をしているので実質的には６日間。応用情報の勉強と家族サービスもあるので、実際の工数はもうちょっと少ない。

作ったものは公開するか

いくつか課題があるので少なくとも直近は公開しない。前述の通り、UIがひどいというのもそうだけど、コンテンツがしょぼい。UIもコンテンツもしょぼいサービスは不安感しかない。不安感しかないから誰も使えない。どっちかの強化を図ってからことにあたりたい。

また、DBから直でデータを読みに行っている仕組み上、DBがボトルネックになることは必然だしセキュリティ的にも好ましくない。フロントで完結するような仕組みを考えるか、KVSにするかもしれない。

まずは

応用情報技術者試験に受かりたいなぁ。受かったら自慢できるしこのアプリの有用性を証明できるんだけどねぇ。

TypeormからHerokuのPostgressに繋ぐときに色々と詰まったところ

Heroku Typeorm TypeScript

Version情報

おおよそ2022年9月ごろ時点のお話

"pg": "^8.8.0",
"typeorm": "^0.3.9"

heroku/7.63.0 wsl-x64 node-v14.19.0

error no pg_hba.conf entry for host

どういうタイミングで出力されていたかは定かじゃないが、error no pg_hba.conf entry for hostというエラーがでてアプリが立ち上がらなかった。

ssl: trueだけだと今度はself signed certificateと表示されエラーとなった。

参考になったサイト

github.com

sslの設定のほかにrejectUnauthorized: falseの設定が必要だったようだ（これで本当にいいのかはちょっとわからんが。。。）

ssl: trueにすると今度はローカルでのテスト時に影響があったので僕は以下のような形にしてみた。本番環境ではNODE_ENVをprodcutionにするということを前提があるので注意。

  const option: DataSourceOptions = {
    ...
-   ssl: false,
+   ssl: process.env.NODE_ENV === "production",
+   extra:
+     process.env.NODE_ENV === "production"
+       ? { ssl: { rejectUnauthorized: false } }
+       : undefined,
    ...

syntaxerror: cannot use import statement outside a module

migration:runを実施するタイミングでsyntaxerror: cannot use import statement outside a moduleというエラーが出た。エラー吐くタイミングで落ちるので当然アプリとして立ちあらがず。

参考になったサイト

dev.classmethod.jp

typescriptで開発していると起きうるケースのようだ。ビルド後のマイグレーションファイル(js)を読みにいくように設定する必要があるとのこと。ts-nodeの設定を変えて解決する方法もあるようだ。

qiita.com

syntaxerror: cannot use import statement outside a module typeormでぐぐるとたくさん出てくるので参考にしてみてほしい。

www.google.com

僕はこういう風に変えた

  const option: DataSourceOptions = {
    ...
    migrations: [
      __dirname + "/migrations/**/*.ts",
+     __dirname + "/migrations/**/*.js",
    ],
    ...