Ruby on Rails開発のインターン (Day 35)

こんにちは、皆さん!

ついにインターン終了まであと1日のところまでやってきた。引き続きデータインポートの機能実装をやっていく方針。今のところ、リダイレクトできないから、何か問題が起きても画面に何の変化もない。もしかしたら、もっといい方法が見つけて、ユーザーに失敗したときにエラーメッセージを返せれたらなというところだね。


  • トピック:
  1. Railsでダウンロードボタンを作る
  2. グローバル変数の代用


  • 疑問:


  • 問題:


  • 学習した内容:
  1. Railsでダウンロードボタンを追加する方法


  • 今後やってみたいこと:


  • リソース:
  1. ruby on rails - How to create a download button (link) for a local image (png) - Stack Overflow
  2. ruby - Rails Global Variable becomes nil across controller actions - Stack Overflow


Railsでダウンロードボタンを作る

これを学習した後、もっと早くこれを習っていたのならと思うくらいだった。すごく優秀な機能であり、アプリの可能性を一気に広げてくれるなと思った。***これからの内容には僕の以前のブログで見つかるような予備知識が必要な場合がある。***

とりあえず、ダウンロードボタンの基本はこう:

<%= link_to "Download", action: :download %>

これがごく普通のダウンロードというアクションを控えたリンクの作り方。
しかし、これだけではdownloadアクションが定義されていないことになる。なので、このダウンロードボタンのあるビューが所属するコントローラーに行き、downloadアクションを関数として追加する。
この関数はユーザーにファイルをダウンロードさせるだけで特に他のことはしないので、中身はだいたい下記のような感じになる。

  def download
    send_data to_csv, filename: "error_lines.csv"
  end

send_dataについて以前のブログを参照するとよいでしょう
こうやって書くと、 "error_lines.csv"というファイルをユーザーに送ることになる。
よし、これでダウンロードボタンの機能はほぼ完成!
だが、ほとんどの場合、このボタンをスタイリングしたいことでしょう。特にお手頃のBootstrapでこうやって

<%= link_to "Download", action: :download, class: "btn btn-primary" %>

そして、ローカルサーバーで開いてみると、あれっ!!!ボタンがスタイルされていない!ってなるはず。
僕も同じエラーが起き、いったいなぜなのかディベロッパーツールを使って確認すると、ボタンが下記のようになっていることに気が付いたのだ。
f:id:Coding_Studio:20180824051438p:plain

それでこれがlink_toというアクションをHTMLタグの中でどのように使うのかに問題があるのだと思った。
そして、いろいろ試した結果下記のでうまくいった。

<%= link_to "Download", {action: :download}, class: "btn btn-primary" %>

そう、つまり、アクションの部分を{}に入れる必要があったのだ。これでどこからどこまでがアクションなのかわかるというわけだ。

あるコントローラー内の複数のアクションである変数を使いたかったので、もっとも簡単といわれるグローバル変数にしてみた($を変数の前につける)

class UsersController < ApplicationController
$var = Array.new
...
end

これでそれぞれのアクションの中で$varというようにこの変数にアクセスできる。

しかし、これはHerokuにプッシュすると、うまくいかなかった。どうやら以前に投稿したグローバル変数がメモリ容量を急速に加速させてしまう可能性を秘めているからかHerokuではリダイレクトしたり、レンダーをすると、グローバル変数をすべて削除してしまう。なので、他のアクションでその値を定義した後にその関数をアクセスしようとすると、想定していた値がそこにはなかった。少し調べてみたが、グローバル変数という選択肢は存在するが、やはり、使わない方がいいというのが一般的な考えだった。

それで探してみたら、かわりにその値をハッシュに入れるのだった。職場のプログラムではログイン機能があったため、セッションのハッシュを使うことにした。

session[:var] = Array.new

値を保存し、様々なコントローラーでも使えるので、かなり重宝できる使用法だと思う。そして、こんな有用なものが学べたことに感謝する。

まとめ

今日はHeroku上でインポート機能のコードがよりいいUIとUXとともに動くようにコードを書いていった。最終的にはうまくいったのですごく嬉しかった。出来上がった後二度見するくらいダウンロード機能を一つのボタンに組み込んだことがカッコよく思えてしかも大きな達成感を感じた。最終日は何をするのか今のところ何もわからないが、何か面白いことを最後にやらせてくれたらうれしいな。


ご精読ありがとうございました。では、また次回まで✌





Day 34はこちら↓↓
programming-shop.hatenablog.com

Ruby on Rails開発のインターン (Day 34)

こんにちは、皆さん!

今日は僕のマネージャーがデータをインポートしようとしたときに生じたエラーの解決を主にやっていこうと思う。僕の書いたマップのテストコードがまだ半分完成というもうちょっと大きな問題もあるが、マップができてないし、今週で僕のインターンは終了なので、おそらくこの状態で渡すことになる。マネージャーたちにあとは任せるしかないね。


  • トピック:
  1. Railsでcsvファイルを作る
  2. send_dataという関数でユーザーのファイルダウンロードを実装する
  3. %w{}で文字列の配列を作る


  • 疑問:
  1. なぜ、send_dataが描画 (render) 関数に分類されるにもかかわらず、それを使った後に、flash.nowがうまく作用しないのか?


  • 問題:


  • 学習した内容:


  • 今後やってみたいこと:


  • リソース:
  1. Export Records to CSV Files with Rails | Codementor
  2. ruby on rails - How to generate a CSV file in action? - Stack Overflow


Railscsvファイルを作る

これはデータを決まったフォームでエクスポートできるという非常に優れた機能である。僕はただこのStackOverflow(
https://stackoverflow.com/questions/31762865/how-to-generate-a-csv-file-in-action)に記されていた通りにやっただけなのでとても簡単。これに記されている通り、to_csvという関数をモデルファイルの中に作り、下記の内容を入れる(関数の最後の部分が以下のように出来上がったcsvを返す内容なら問題ないはず)。

    CSV.generate(headers: true) do |csv|
      csv << attributes

      cars.each do |car|
        csv << attributes.map{ |attr| car.send(attr) }
      end
    end

よって、僕は自分のを下記のように作った

  def to_csv(error_lines)
    attributes = # can't show you this
    CSV.generate(headers: true) do |csv|
      csv << attributes

      error_lines.each do |hash|
        csv << hash
      end
    end
  end

というわけで、これがto_csv関数を自分の思うようにカスタマイズする方法だ。

最後に、僕は下記のコードでcsvファイルを返してくれるウェブ上での操作を実装した。

      send_data to_csv(error_lines), filename: "error_lines.csv"

ん?send_dataって何?ってなるのでsend_dataについて次のセクションでもっと詳しく解説していこうと思う。

send_dataという関数でユーザーのファイルダウンロードを実装する

send_data関数は直接ユーザーにファイルをダウンロードさせるものだ。よくウェブサイトでダウンロードというリンクを押すと、新しいタブが開かれて、ダウンロードが始まるかと思う。まさにあれなんです、これがやっているのは!

しかしながら、この関数を使ってみたところ、少々面倒くさいものがいくつか見つかった。この関数のもっとも厄介なところは描画 (render) 関数であること。これが意味するところは、この関数をコントローラー内で使用することで同じアクション内ではリダイレクトなどの操作ができなくなることだ。
下記のコードはこのサイトで見つけたsend_data関数のソースコード

# File actionpack/lib/action_controller/metal/streaming.rb, line 112
      def send_data(data, options = {}) #:doc:
        send_file_headers! options.dup
        render options.slice(:status, :content_type).merge(:text => data)
      end

見ての通り、render関数を実行している。
でも、なぜなのか僕のflash.nowはここでは正常に機能しなかった。(いまだに未解決)

%w{}で文字列の配列を作る

ここの内容はcsvファイルから少し離れるが、今回csvファイルの操作を学習する中で触れる機会があったので、ついでにここにメモしておこうと思う。

使用頻度は高くないかもしれないが、一つ一つの要素の間にコンマを入れる必要がないので、文字列の配列を定義する速度をすごく高めてくれる。

この関数を使用する方法は下記のような感じだ:

# same as array = ["name", "age", "gender", "email"]
array = %w{name age gender email}

そう、つまり、一つ一つの要素をコンマの代わりにスペースで仕分ける。おまけにクオーテーションもいらないという。意外と慣れないと癖でクオーテーションを打ってしまうのが個人的な感想かな(笑)

もし、スペースを含んだ文字列を入れたいのなら?

下記のようにやりましょう!

# same as array = ["date of birth", "my goal"]
array = %w{date\ of\ birth my\ goal}

とてもシンプル。ただ\を入れて、スペースをエスケープするだけ。

まとめ

今日はとてもたくさんRuby独特のコードについて学ばされた一日だった。こういう新しいことをやるたびに、Rubyって本当に様々な機能があって、いつまで経ってもすべてをカバーできないような気がしてくる(笑)
明日は引き続きインポート機能をやり、更に、もう2日しかないので、残りの諸事情が無事に片付くことを願いたい。


ご精読ありがとうございました。では、また次回まで✌



Day 35はこちら↓↓
programming-shop.hatenablog.com


Day 33はこちら↓↓
programming-shop.hatenablog.com

Ruby on Rails開発のインターン (Day 33)

こんにちは、皆さん!

今日、今週が結構タフになりそうだと気が付いた。いろんな仕事が重なり、土曜日まで忙しいという。まあ、でも、少し多くお小遣いが稼げるからよいことにしよう。でも、Railsとあと良ければReactJSを学習する時間も確保したい。できるといいけど...。


  • トピック:
  1. inputタグのaccept属性の値を設定する


  • 疑問:


  • 問題:


  • 学習した内容:
  1. inputタグのacceptの値を設定することでアップロードできるファイル形式を決めることができる


  • 今後やってみたいこと:


  • リソース:
  1. HTML input accept Attribute


inputタグのaccept属性の値を設定する

作ったプログラムでユーザーにcsvファイル以外のファイルをアップロードできないようにするためにinputタグに制限をつけようとした。そして、少し検索した結果、accept属性をつけ、".csv"と指定することで達成できることが分かった(僕の場合はRailsだったからfile_field_tag内に入れた)。下記のが僕ので成功した内容:

<%= file_field_tag :file, accept: '.csv' %>

これが普通のHTMLだと下記のようになる。

<input type="file" accept=".csv">

正直、ファイル形式を制限するのがこんなに簡単だとは思っていなかった。これでユーザーが他のファイル形式のファイルをアップロードしたときに出すエラーを考える必要がおそらくなくなった。

まとめ

今日はウェブサイト上にデータをcsvファイル形式でアップロードする機能を実装した。今のところ、ユーザーが行った作業に対するエラーチェックが少ないので、明日はそこらへんに重点を当てて、より高精度な機能にしようと思う。それと、マネージャーが問題のないはずのcsvファイルを使ったのにもかかわらず、データがシステムにアップロードされなかったといっていたので、そこらへんも確認しようと思う。長くかからないといいけど。


ご精読ありがとうございました。では、また次回まで✌




Day 34はこちら↓↓
programming-shop.hatenablog.com


Day 32はこちら↓↓
programming-shop.hatenablog.com

Ruby on Rails開発のインターン (Day 32)

こんにちは、皆さん!

ついにインターンの最後の週がやってきた。結構な期間があったけど、やっぱりあっという間って感じだったね。
以前他の部のマネージャーが僕に新しいウェブサイトのデザインを準備しておくから、やってほしいと頼まれた。当時はまだ2週間あったからいいですよと答えたのだが、最後の1週間になった今、まだデザインが届かないのは果たしてどういうことだろうか...。今日もオフィスに行ってみると、そのマネージャーは来ていないし(笑)


  • トピック:
  1. CSVファイルをアップロードしてデータを作成する


  • 疑問:


  • 問題:


  • 学習した内容:
  1. CSVファイルを使ってRailsアプリにデータをインポートする


  • 今後やってみたいこと:
  1. CSVファイルのアップロードに関する記事を書く


  • リソース:
  1. How To Import CSV Files In Rails — Matt Morgante


CSVファイルをアップロードしてデータを作成する

あんなに簡単に.csvファイルをアップロードして、中のデータをRailsアプリにインポートすることができるだなんて知らなかった。

僕はただこのサイト通りにコードを書いただけでそれができた。このサイトは本当によくまとめられていると思う。

いずれ完全なRailsでの実装方法をまとめるつもりなので、ここではcsvファイルについて基本的なことを少し説明しようと思う。
最初に、このタイプのファイルの構造はエクセルと大変似ている。行と列があり、それぞれでできた枠の中に数値や文字を入れる。しかし、もし、VScodeなどの枠に対応しないエディターで開くと、それぞれの要素の間にコンマを入れて、違う枠に入っていることを示さなければならない。
いいことは表と同じようにそれぞれの列が何を表すのかを示すヘッターは最初の1行だけでいいということだ。

例えば下記のように

id,name,age
1,Alisa,18
2,Nick,23
3,Bob,21

# ヘッターの一つ一つの名称はデータベースのそれと完全に同じである必要がある#
VScodeで書いたときに上記のようなcsvファイルを書く。これで、もし、このファイルをアップロードしたのなら、アプリ内でそれぞれの行を1行ずつ処理し、与えられた年齢とともに3人のユーザーがデータベースに登録される。

これはユーザーにとっても、アプリの管理人にとっても、とっても便利な機能となるので、データを扱うのなら絶対に実装したい機能だといえるしょう。

まとめ

今日はこの記事で紹介した通りのcsvファイルアップロード機能を実装しようとした。しかしながら、ヘッターとデータベースの名称が違っていたため、この簡単な方の方法が使えないことに気が付いた。なので、めんどくさいけど、シニアのエンジニアが一つ一つたたき出した自作のコードでこれを実装することになった。それを使いたくなかった理由は少しコードが長いこと、そして、それのせいでコントローラーが見づらくなるのを防ぎたかったからだ。
仕事の後、家に帰ると、UBCでのパートタイムの仕事の面接を行いたいとメールが来ていた。前回たくさん応募したのに一つも返ってきたことがなかったし、学校という家に近いところで仕事ができるのですごく嬉しかった。うまくいくといいなーー!


ご精読ありがとうございました。では、また次回まで✌




Day 33はこちら↓↓
programming-shop.hatenablog.com


Day 31はこちら↓↓
programming-shop.hatenablog.com

Ruby on Rails開発のインターン (Day 31)

こんにちは、皆さん!

今週も最終日!!これでこのインターンも残り1週間ってところ。時間がたつのは本当に早い。そろそろ次に学校に行きながらできる仕事を探し始めないとな。
今日はcsvファイルをユーザーにアップロードさせるときの関数を設計していくところから始める。


  • トピック:
  1. フローチャートを描くツール


  • 疑問:


  • 問題:


  • 学習した内容:
  1. フローチャートを使って関数の仕組みを描き出すことで、他のディベロッパーでも関数が理解しやすいようにする


  • 今後やってみたいこと:


  • リソース:
  1. Online Diagram Software & Visual Solution | Lucidchart


フローチャートを描くツール

コードの特定の一部をフローチャートを使って描き出すことは他の人たちにその関数の仕組みを理解させやすくすることに大きく貢献できる。

この投稿ではマネージャーから紹介された2つのフローチャートを描く無料のソフトウェアについて紹介する。

f:id:Programming_Shop:20180907114319p:plain
最初のものはLucidchart
これはマジですごい!!ソフトウェア内に様々な形のものがあり、ドラッグアンドドロップでサイドバーの中から図の中に取り出すことができる。そして、図に出した後、それぞれの図形の中に2つのマウスで動かせる部分があり、それぞれ矢印と図形の大きさをコントロールする赤い点と青い四角形である。下記のはそのスクショの一部である。
f:id:Coding_Studio:20180821032208p:plain

この機能によっていちいちサイドバーから矢印を選択したりなどの作業をしなくていいから効率性が増す。
さらに、グーグルドライブと同期することでこのソフトウェアで作った作品を他の人とシェアすることができる。

しかし、1点残念なところがある。無料アカウントを使う限り、3つまでしかグラフを描くことができないことだ。1年分払うのなら1か月$4.95、月払いなら$5.95と少し値は張る。まあ、それでも個人的にはフローチャートを多用するのなら2つ目のものとの機能性を比較して考えると、全然得するレベルだと思う。




f:id:Programming_Shop:20180907114256p:plain
2つ目はグーグル図形描画。これは完全無料の優れもの。そして、Chromeでサインインした状態なら自動的にグーグルドライブに保存される。そして、グーグルドライブに保存されるということは複数人で同時に編集することができるということでもある。

しかし、このソフトウェアを使うのなら、ナビゲーションバーのアイコンをいちいちクリックして、マウスでできる機能を変更する必要がある。例えば、「挿入」ボタンを押して、「図形」を押して、初めて、選びたい図形が選べる。これはLucidChartに比べると、かなり作業効率が低い。さらに、LucidChartと違って、矢印と文字の重複が発生するため、文字を矢印上におくと、文字が見にくくなる傾向がある。

それでも、そのシンプルなデザインと簡単なナビゲーションバーにより、こっちのインターフェイスを気に入る人もいる。あと、複数人で同時に編集できるという恩恵は大きい。




グーグル図形描画を使うかは一人当たりの効率性複数人による作業の可能という2つの要素で判断するといいでしょう。

まとめ

フローチャートを描く方法を振り返るにはとてもいい機会だったと思う。学校で習ったときはあまり実用的に感じなかったものが実はすごく役に立つものなんだなと思った。このグラフがあると、マネージャーも僕の設定した関数の仕組みが一瞬でわかるらしくすごく嬉しかった。これらは今回のインターンで学習したコーディングに直接関係しないが、間接的にその効率を上げてくれるソフトウェアだなと思った。ぜひ、機会があればこういうソフトウェアでの経験も積んでいきたいな。


ご精読ありがとうございました。では、また次回まで✌



Day 32はこちら↓↓
programming-shop.hatenablog.com


Day 30はこちら↓↓
programming-shop.hatenablog.com

Ruby on Rails開発のインターン (Day 30)

こんにちは、皆さん!

さーて、今日は職場のプログラムのテストで使われているfactory-girlというジェムの詳細を読んで、使えるようにするところから。
昨日、自分のウェブサイトを完成させたので、今は少しほっとしていて、仕事に集中できると思う。


  • トピック:
  1. factory_botジェムとは?
  2. factory_botの始め方
  3. factory_botジェムを効率的に使う方法


  • 疑問:


  • 問題:
  1. マップテスト用のデータを効率的に定義する方法を見つける(factory_botジェムで解決)


  • 学習した内容:
  1. factory_botジェムのテンプレートを作る方法


  • 今後やってみたいこと:


  • リソース:
  1. File: GETTING_STARTED — Documentation for factory_bot (4.11.1)


factory_botジェムとは?

factory_botジェムはデータを作るときのテンプレートを作成してくれるもの。これはたくさんの一時的なデータを作るときに役に立つ。

簡単な例を挙げると、

# spec/factories/user.rb
FactoryBot.define do
  factory :user do
    name "Bob"
    email "bob@example.com"
    admin false
  end
end

こうして、定義した後、任意のspecファイルで下記のようなコードを書くと、

user = create(:user)

"Bob"という名前で"bob@example.com"というメールのユーザーを簡単に作れちゃうというわけだ。
これは下記のコードを実行するのと同じことをしている。

user = User.create(name: "Bob", email: "bob@example.com")

これでどれだけのコードを省くことができたのかが分かるでしょう。特に、これを何度も繰り返せば、その分だけ、このジェムの効力も大きくなる。

factory_botの始め方

まず、初めに、ジェムのインストール。Gemfileに下記のを入れる。

gem "factory_bot_rails", "~> 4.0"

そして、bundle install

そしたら、設定のセットアップとして、下記のファイルを作成して内容を入れる。

# spec/support/factory_bot.rb
RSpec.configure do |config|
  config.include FactoryBot::Syntax::Methods
end

Railsを使わない場合はこちら↓↓

# RSpec without Rails
RSpec.configure do |config|
  config.include FactoryBot::Syntax::Methods

  config.before(:suite) do
    FactoryBot.find_definitions
  end
end

そしたら、specファイルがこの設定を使えるようにするため、下記のようにrails_helper.rbにファイルのインポートを入れる。

require 'support/factory_bot'

そしたら、データを作る準備はできたので、下記の簡単な例を試してみよう(始める前にUserのモデルが必要だが

# spec/factories/user.rb
FactoryBot.define do
  factory :user do
    name "Bob"
    email "bob@example.com"
    admin false
  end
end

そしたら、Rspecのテストコード内で下記のように実行するだけ。

user = create(:user)

これで、もともと定義した通りのユーザーをデータベースに追加できる。

factory_botジェムを効率的に使う方法

factory_botジェムを最大限に利用するには、先ほどのように定義したデータにさらにケースごとに必要な部分だけを追加したデータを作る必要がある。
下記のコードの例では、アドミンにするかどうかというケースを設置した。
先ほどの例に下記のようにコードをつけ足すと、アドミンのケースが完成する。

# spec/factories/user.rb
FactoryBot.define do
  factory :user do
    name "Bob"
    email "bob@example.com"
    admin false

    trait :admin do
      admin true
    end
  end
end

factory_botのおかげで、アドミンユーザーを作るときに変更する必要のない元から定義された名前とメールを再定義することなく、使用することができる。なので、アドミンの場合は、一つだけしか定義するコードがない。

そして、これを使うためには、ただ下記のようにすればよい。

admin_user = create(:user, :admin)

これで、下記のと同じことをしたことになる。

admin_user = User.create(name: "Bob", email: "bob@example.com", admin: true)

このようなケースがいくつも存在するとしたら、いったいどれほどのコードを省くことができるのでしょうか?
このジェムはマジで役に立ち、特に大きなプロジェクトで使うことによって、その真価を発揮するのだ。

まとめ

テストコードを書くための知識をより多く学べたのは大きかった。この知識はさらに、職場でやろうとしていたテストコードにおけるデータの効率的な定義方法に合致するため、職場で大きく貢献できるでしょう。最初は職場のテストコードを見ていて、意味が分からないようなシンタックスを使っているようだったが、今では手に取るように理解できるというね(笑)


ご精読ありがとうございました。では、また次回まで✌



Day 31はこちら↓↓
programming-shop.hatenablog.com


Day 29はこちら↓↓
programming-shop.hatenablog.com

Ruby on Rails開発のインターン (Day 29)

こんにちは、皆さん!

今日はなぜCapybaraテストでドロップダウンをクリックできないのかを調べるところからスタート。それと、どうやって効率的にテスト用のデータを作るかだな。今日はどのくらいできるのか見てみよう。


  • トピック:
  1. 僕がどうやってCapybaraテストからドロップダウンをクリックしようとしたのか


  • 疑問:
  1. なんでわざわざブラウザではドロップダウンの形式を変えてくるのだろうか?


  • 問題:
  1. Capybaraテストからドロップダウンをクリックすることができない
  2. コンソールで作ったデータがテスト時に消えている


  • 学習した内容:


  • 今後やってみたいこと:


  • リソース:


僕がどうやってCapybaraテストからドロップダウンをクリックしようとしたのか

僕が最初にやったのはディベロッパーツールでHTML要素を確認するところだった。これはCapybaraテストをやるときのいつものスタート地点。前回はこれのおかげでグーグルマップ上のマーカーを選ぶ方法を見つけて、無事マーカーの数を数えることができた。

今回はドロップダウンの中身を見ていくのだが、面白いことに、ドロップダウン自体は一つのボタンであり、その内容は下記のようにoptionタグで定義したのにもかかわらずそうではなかった。

<select id="gender">
  <option id="option" value="male">Male</option>
  <option id="option" value="female">Female</option>
</select>

それで、ディベロッパーツールで見たのだが、下記のようなものが出ていた。

f:id:Programming_Shop:20180831162848p:plain

つまり、optionタグ内に定義されたドロップダウンの内容はoptionタグの中にはもはや存在しないので、他の方法でliにアクセスする形でアクセスする必要がある。
幸運にも、Capybaraテストのfind()関数はCSSセレクターと同じようにHTML要素を選択できるので、どこにそのドロップダウンの内容が隠れているかさえわかればよかったのだ。

ドロップダウンに関しては、もう一つ問題があった。僕たちが実際にドロップダウンから選択したい選択肢を選ぶときにそのドロップダウンをまず開く必要があるのと同じように、Capybaraテストでもそれを開くところから始まる。ということで、まず、Capybaraテストにドロップダウンのボタンを押すように指示した。

クリックする前:
f:id:Coding_Studio:20180818034945p:plain

クリックした後:
f:id:Coding_Studio:20180818035031p:plain

クリックした後に、選択肢の内容部分が色を変えて、有効になっているのが分かる。

なので、下記のようにボタンにクリックし、

find('button.dropdown-toggle').click()

そして、二個目の選択肢を下記のように選んだ。

find('ul.dropdown-menu li[data-original-index="1"]').click()

f:id:Coding_Studio:20180818035131p:plain

このCSSセレクターが見づらいのはわかる。単純に言うと、二つある順序のないリストの二つ目を選ぶという意味だ。
よって、ドロップダウンの二つ目の選択肢を選択するためのCapybaraテストコードは僕の場合、下記のようになる。

# Choose female from the dropdown
find('button.dropdown-toggle').click()
find('ul.dropdown-menu li[data-original-index="1"]').click()

完璧!今日もまた一つ問題を解決した。

まとめ

結構数日考えたから、ドロップダウンの内容を選択できたことは僕にとって大きな達成だった。ディベロッパーツールの有用さに気づかされたから、次はもっと早い段階で使っていきたいね。


ご精読ありがとうございました。では、また次回まで✌



Day 30はこちら↓↓
programming-shop.hatenablog.com


Day 28はこちら↓↓
programming-shop.hatenablog.com