テスターちゃん【4コマ漫画】

ソフトウェアテストの用語、やり方などを4コマ漫画でわかりやすく説明する(予定の)ブログです。脱線も多いです。



DockerでPlaywrightを実行/確認するコードの配布【仮想ディスプレイもレポートも見れるよ版】

作者です。

dockerでPlaywrightを実行するDockerfileを書いたので配布します。

dockerを起動すればもうPlaywrightのテスト実行可能です。

github.com

あと久しぶりにyoutubeでどう使うかも実演付きで説明してみましたので、そちらもよろしければ見てみてください。

youtu.be

 

ネットを見ていたら、dockerでPlaywrightをヘッドレス(実行中の様子が見えない状態)で実行する記事はあるのですが、docker内部で自動テストが実行されている様子が見えるようにするにはどうしたらいいか、が書かれた場所が作者が探す限りでは見つからなかったので、それをできるようにしてみました。

通常dockerでplaywrightを実行するときは「できあがったテスト」を実運用する場合なので動いている様子を見る必要がない、といったところはあるかと思います。

ただdockerには「手軽に、かつ自分の環境を汚さないで開発環境を作る」ことにも使われたりします。

あとは簡単にメンバーの自動テスト環境を整えるというようなことにも使えます。

今回のコードはそれがメイン……と言いつつ、ぶっちゃけ作者が「説明ないし作ってみよ~」といったところではありますw

テスト結果レポートを見るのもシンプルな形で実現しています。

使い方については、githubに全て説明を書いているのでそれをご参照ください。

 

次回youtubeは「じゃあこのdockerfileで何してるのさ?」という技術の話をしようかなーと考えています。

 

いや、マンガの続き描けよという話ですよねw

 

2023クリスマススペシャル「バグバッシュ大会」その2

2023クリスマススペシャル「バグバッシュ大会」その2

うっかり長い話にしてしまいました。

1月までクリスマスを引っ張ってしまいましたが、描いてみたかったのだからしようがないです(笑)

次で最後予定です。

最後の回の時にまとめて「バグバッシュ」についてのブログを書きます。

 

テスターちゃん小ネタ

開発のかいさんの髪型は、作者の前々職でご一緒した開発の方の髪型です。

(髪がつんつくしてました)

 

2023クリスマススペシャル「バグバッシュ大会」その1

2023クリスマススペシャル「バグバッシュ大会」その1

今回はバグバッシュのお話です。

クリスマススペシャルということで、普通のマンガを意識して描いてみています。

ネームを書いたら意外と長くなってしまい……。

このあと

* リーザ主任・カイさん(開発)チーム

* きゅんちゃん・ノリエ(企画)チーム

* まとめ

このような感じで、大体あと8ページほど描きます。

 

バグバッシュについてのブログは最後の回のときに書きます。

【END】ChatGPTを用いたTDD part.7 (実行ファイル作成編)

[END]ChatGPTを用いたTDD part.7 (実行ファイル作成編)

ChatGPTを用いたTDD part.6の続きです。

 

  • [END]ChatGPTを用いたTDD part.7 (実行ファイル作成編)
    • 実行できるコードを作る
  • ファイル名を受け取って、エラー処理、またはget_top_allで処理し、csvを返す
    • テストコードを書く
    • 最初のテストでレッドを出す
    • 最短でグリーンになるコードを書く
    • 詳細を実装する
    • テストを追加する
    • 機能追加、リファクタリング
  • 最後に実行できるコードにする
  • 最後のシステムテスト
    • 実行結果
  • 最後に所感
  • 今回の成果物のgithub

 

実行できるコードを作る

必要な部品をすべて作りました。

最後はコマンドプロンプト(terminal)で実行できるようにします。

イメージは以下です。

  1. コマンドプロンプトで実行し、第一引数をファイル名とする
  2. read_fileでファイルを読み込む
  3. 配列の最初に"Error"があったらその配列を表示し、異常終了させる
  4. 読み込んだファイルの内容をget_top_all(string_array)に渡す
  5. get_top_allの戻り値をconvert_csv(string_array)に渡す
  6. ラベル部分を出力する
  7. convert_csvの戻り値を出力する

これを書いていて、2~5までのプロセスはまとめてしまったほうがテストが楽かと思いましたので、TODOを追加します。

ファイル名を受け取って、エラー処理、またはget_top_allで処理し、csvを返す
    ファイル名を受け取って、read_fileでエラーが出た場合は終了させる
    [] ファイル名を受け取って、read_fileができた場合はget_top_allで処理し、csvを返す

ファイル名を受け取って、エラー処理、またはget_top_allで処理し、csvを返す

まずはエラーがない場合のテストを考えます。

すでに用意してある以下を使います。

test_file.txt

期待結果は以下となります。

13:52:54,00:06,16.2,20.3,5.0

テストコードを書く

続きを読む

ChatGPTを用いたTDD part.6 (最後の部品作り編)

ChatGPTを用いたTDD part.6 (最後の部品作り編)

ChatGPTを用いたTDD part.5の続きです。

今回で作る部品がすべて完成します。

まずはcsvにするメソッドを作ります。

 

  • ChatGPTを用いたTDD part.6 (最後の部品作り編)
  • csvにして画面出力を行う
    • テストコードを書く
    • テストを実行しレッドを確認する
    • 最短でグリーンになるコードを実装
    • 詳細の実装
    • テストがグリーンになるまで修正を続ける
  • ファイルを読み込み、1行1行に分解して出力する
    • テストコードを書く
    • テストを実行しレッドを確認する
    • 最短でグリーンになるコードを実装
    • 詳細の実装をする
    • テストがグリーンになるまで修正を行う
    • エラー時のテストを追加する

 

csvにして画面出力を行う

最初このように書いたのですが画面出力にしてしまうとテストが大変です。

これから作るメソッドは、文字列配列を受け取ったらカンマで結合して、その文字列を返すメソッドにします。

なのでTODOを書き換えます。

文字列配列をcsvの文字列にして返す
    与えられた文字列配列をcsv形式に結合して返す

テストデータは以下です。

["13:52:54","00:06","16.2","20.3","5.0","2.6\n","13:52:54","00:06","16.2","20.3","5.0","2.6\n"]

期待結果は以下です。

"13:52:54,00:06,16.2,20.3,5.0,2.6\n13:52:54,00:06,16.2,20.3,5.0,2.6\n"

テストコードを書く

続きを読む

ChatGPTを用いたTDD part.5 (Integration test編)

ChatGPTを用いたTDD part.5 (Integration test編)

ChatGPTを用いたTDD part.4の続きです。

次は、1行1行分かれている文字列データを順次読み取っていって、データを収集させる部分を作ります。

 

  • ChatGPTを用いたTDD part.5 (Integration test編)
  • 文章全体のデータを収集して、集めたデータを返す
    • テストコードを書く
    • 最短でグリーンになるコードを実装
    • 詳細の実装
    • テストを変更する

 

文章全体のデータを収集して、集めたデータを返す

イメージとしては、ファイルを読み込んだら1行1行に分解して、それをこれから作るメソッドに投げれば、必要なデータが全部取得できる、です。一続きの長い文字列配列を得られることを想定しています。

ファイルの読み込み部分とcsv出力部分は最後に作ります。

今回はMockなしで結合して確認します。

テストデータは以下です。

[

"top - 13:52:54 up 6 min,  0 users,  load average: 0.01, 0.07, 0.03",

"Tasks:   2 total,   1 running,   1 sleeping,   0 stopped,   0 zombie",
"%Cpu(s):  16.2 us,  20.3 sy,  5.0 ni,63.5 id,  0.0 wa,  0.0 hi,  0.0 si,  0.0 st",
"KiB Mem : 40979980 total, 37696840 free,  1050480 used,  2232660 buff/cache",
"KiB Swap: 10485760 total, 10485760 free,        0 used. 39463640 avail Mem"

]

期待結果は以下です。

[

"13:52:54","00:06",

"16.2","20.3","5.0",

"2.6\n"

]

テストコードを書く

続きを読む

ChatGPTを用いたTDD part.4 (Mock編)

ChatGPTを用いたTDD part.4 (Mock編)

ChatGPTを用いたTDD part.3の続きです。

TDDでTODOを行っていきます。

次は、これまで作ったget_time,get_cpu,get_memを入力された文字列に応じて処理をわける部分の実装です。

ここはMockを使ってテストを実装していきます。

 

  • ChatGPTを用いたTDD part.4 (Mock編)
  • top,cpu,memを判別してそれぞれのデータを返す
    •  
    • テストコードを書く
    • 最初のテスト実行(レッドの状態)
    • 最短でグリーンになるコードを実装
    • 詳細の実装
    • テストコードを追加し、すべてがグリーンになるまでテストを行う

 

top,cpu,memを判別してそれぞれのデータを返す

top,cpu,memを判別してそれぞれのデータを返す
    文字列の先頭がtopだった場合、topに対応するメソッドを呼び出し戻り値を返す
    文字列の先頭が%Cpu(s)だった場合、cpuに対応するメソッドを呼び出し戻り値を返す
    文字列の先頭がKiB Memだった場合、memに対応するメソッドを呼び出し戻り値を返す

イメージとしては、topが含まれた行を受け取った時はget_timeを呼び出し、cpuが含まれた行を受け取った時はget_cpuを呼び出し、memを含んだ行を受け取った時はget_memを呼び出し、それぞれに応じた戻り値を得るメソッドです。

まずは最初のtopだったときの戻り値を確認するテストコードを書きましょう。

top - 13:52:54 up 6 min,  0 users,  load average: 0.01, 0.07, 0.03

これを受け取った時に期待結果は以下です。

["13:52:54", "00:06"]

 

テストコードを書く

続きを読む

ChatGPTを用いたTDD part.3 (TODO実装続き)

ChatGPTを用いたTDD part.3 (TODO実装続き)

ChatGPTを用いたTDD part.2の続きです。

TDDでTODOをこなしていきます。

次はCPUの値を抜き出すところです。

 

  • ChatGPTを用いたTDD part.3 (TODO実装続き)
  • 与えらえた文字列からus、sy、niを抜き出して返す
    • テストコードを書く
    • 最初のテスト実行(レッドの状態)
    • 最短でグリーンになるコードを実装
    • 詳細の実装
    • リファクタリング
  • 与えられた文字列からメモリ使用率を計算して返す
    • テストコードを書く
    • 最初のテスト実行(レッドの状態)
    • 最短でグリーンになるコードを実装
    • 詳細の実装
    • グリーンになるまで修正
    • テストを追加し、グリーンにする

 

与えらえた文字列からus、sy、niを抜き出して返す

与えらえた文字列からus、sy、niを抜き出して返す
    文字列を引数として、us、sy、niを文字列配列にして返す

まずはテストコードを書きます。ChatGPTが。

テストデータは以下として、us,sy,niを抜き出して文字列配列で返すことを目標とします。

%Cpu(s):  16.2 us,  20.3 sy,  5.0 ni,63.5 id,  0.0 wa,  0.0 hi,  0.0 si,  0.0 st

※ChatGPT4.0だとテストコードを書いてもらおうとしてもテストコードを実行しようとするのでChatGPT3.5で書いています。

 

テストコードを書く

続きを読む

ChatGPTを用いたTDD part.2 (最初の実装編)

ChatGPTを用いたTDD part.2 (最初の実装編)

ChatGPTを用いたTDD part.1の続きです。

TDDを実践していきます。

時刻とup_timeを抜き出すTODOからやっていきます。

 

最初に、最後に書いた結果を記載すると

テストの実行結果/エラー文をひたすら与えるとChatGPTはテストを満たすコードを書くことができた

です。

 

  • ChatGPTを用いたTDD part.2 (最初の実装編)
    • 与えられた文字列から時刻とup_timeを抜き出して返す
    • テストコードを書く
    • 最初のテスト実行(レッドの状態)
    • 最短でグリーンになるコードを実装
    • 最初のグリーン
    • 詳細の実装
    • テスト実行
    • リファクタリング
    • リファクタリングとテストを繰り返す
    • おまけ

 

与えられた文字列から時刻とup_timeを抜き出して返す

ファイルの読み込み、csv出力は後にして細かい部品から作ります。

与えられた文字列から時刻とup_timeを抜き出して返す
    文字列を引数として、時刻、up_timeを文字列配列にして返す

TDDなのでまずはテストを作ります。ChatGPTを使います。

テストデータは以下として、この時間とup timeを抜き出して文字列配列で返すことを目標とします。

top - 13:52:54 up 6 min,  0 users,  load average: 0.01, 0.07, 0.03

 

テストコードを書く

続きを読む

ChatGPTを用いたTDD part.1 (TODO用意編)

ChatGPTを用いたTDD

作者こと私です。

本記事はソフトウェアテスト Advent Calendar 2023 4日目の記事ということで、今回はマンガではない話をします。

ChatGPTを使ってTDDを試してみます。

ネットを検索するとFizzBuzzなどばかりで面白みがないので、今回は多少使えそうなツールを作ることを目標とします。

 

今回はテストコードもchatGPTで作りますが、テストコードは自分で書いて、プロダクションコードをchatGPTに書いてもらうというようなTDDをを行うと、ChatGPTで意図した結果を得られるコードが書けそうでした。

この記事で書いたお題などは練習のお題としてお好きに使っていただいて構いません。

 

記事は本記事を含め計7本です。

ChatGPTを用いたTDD part.2 (最初の実装編)

ChatGPTを用いたTDD part.3 (TODO実装続き)

ChatGPTを用いたTDD part.4 (Mock編)

ChatGPTを用いたTDD part.5 (Integration test編)

ChatGPTを用いたTDD part.6 (最後の部品作り編)

[END]ChatGPTを用いたTDD part.7 (実行ファイル作成編)

最後の所感

作った成果物

作るもの

私は近頃仕事でtopコマンドの出力を眺めることが多いです。

topコマンドはシステムのCPU使用率やメモリを確認できるコマンドです。

1回の実行でその時の状況がわかります。

これを連続実行してCPUやメモリの変化を時間で追います。

以下は3回連続で実行させたものです。上にシステム全体のCPU使用率などが表示され、その下にプロセスごとの表示がされています。

(dockerでcentosを立ててtopコマンドを実行した結果)

私は全体傾向を追っていくことが多いです(取り扱っているモノがシステム全体のため)

今回は全体側のCPU使用率、メモリ使用率を以下のように時系列で表にするコードを書きます。

 

TDDの流れ

詳しい説明は他のブログに任せるとして以下のことを繰り返して進めます。

  1. TODOリストを書く
  2. TODOリストから一つ選んでテストを書く
  3. 全テストコードを実行させて加えたテストでレッド(エラー)を確認する
  4. 最短でグリーンになる実装を行う
  5. 全テストコードを実行させて加えたテストでグリーンを確認する
  6. リファクタリングする(詳細の実装、重複コードの除去など)
  7. 全テストコードを実行させて加えたテストを実行し結果を確認する
  8. 6~7を繰り返し、すべてグリーンになったら2へ戻る

TODOリストを作る

続きを読む