日付の入力

2024年3月31日

WinGoferで想定している日付入力のパターン
  • SELECT（プルダウン）項目
  • テキストボックス
  • HTMLの<input type="date">
  • 対象サイトが用意するカレンダーでの入力

SELECT日付

年月日をプルダウンで選択する形式です。

年 月 日​

画面要素XPath
年//select[@id="birth_year"]
月//select[@id="birth_month"]
日//select[@id="birth_day"]
操作シナリオ
CAL:GROUP一連の日付操作を定義します。
上では、2行目～5行目までが同一グループであることを表しています。
CAL:HEADER-YEAR年のSELECTボックスを定義します。
リストの項目は西暦4桁なので、年の表示形式はyyyyです。
CAL:HEADER-MONTH月のSELECTボックスを定義します。
リストの項目は1～12で、月の表示形式はmです。
（ゼロ埋めあり、01～12の場合は、mmとなります）
CAL:SELECT-DAY日のSELECTボックスを定義します。
リストの項目は1～31なので、日の表示形式はdです。
CAL:DATE-VALUE入力する日付の値を定義します。入力元は固定値（Fixed=True）にしていますが、Excelのセルを設定することも可能です。

入力値の日付フォーマットにあわせて、セルの日付形式を指定します。
例1：1984/2/8　→　yyyy/m/d
例2：1984/01/03 　→　yyyy/mm/dd
例3：8-Feb-84　→　d-mmm-yy
例4：February 8, 1984　→　mmmm d, yyyy
例5：令和３年7月5日　→　ggge年m月d日
例6：令３年7月5日　→　gge年m月d日
例7：H32.4.8　→　ge.m.d
通常のSELECT入力

なお入力日付を年・月・日に分解すれば、通常のSELECT項目として入力することもできます。

通常SELECT入力

テキストボックス

SELECTの代わりに、一部あるいは全部がテキストボックスになっている場合も、同様の操作シナリオで入力できます。

年 月 日​

画面要素XPath
年//input[@id="text_year"]
月//select[@id="select_month"]
日//select[@id="select_day"]
操作シナリオ
通常のテキスト

入力日付を年・月・日に分解すれば、通常のTEXT項目やSELECT項目として入力することもできます。

通常入力項目

<input type="date">

HTML5で導入された日付入力のinput要素です。
手動操作では、テキスト欄に日付を直接入力するか、カレンダーを開いて入力します。
（このカレンダーはブラウザ独自仕様で、HTML要素ではないため、WinGoferでは操作できません。）

WinGoferでは、TYPE【Element:DATE】を指定します。

操作シナリオ

カレンダー入力

このカレンダーで指定した日付（入力値）をクリックすることを考えます。操作としては、

  • ヘッダー部分から年月を読み取る
  • 入力する日付が、過去なら「＜」ボタン、未来なら「＞」ボタンをクリック
  • ヘッダーの年月が入力日付と等しくなれば、カレンダーの日（1～31）部分をクリック

です。

最終的に、入力値に対応するカレンダーの日部分（1~31）をクリックする必要があります。そのためのXPathを求めます。

XPathの取得

カレンダーは3ヶ月分ありますが、とりあえず左のカレンダー【2023年1月】のXPathは

画面要素XPath
ヘッダー年//div[@id="calendar"]/section[1]//span[1]
ヘッダー月//div[@id="calendar"]/section[1]//span[2]
前月「＜」ボタン//a[@id="prev"]
クリック対象日1日：//td[1][@class="calendar_td"][text()=’1′]
2日：//td[2][@class="calendar_td"][text()=’2′]
3日：//td[3][@class="calendar_td"][text()=’3′]
　　　　　　　　　　・
　　　　　　　　　　・
29日：//td[1][@class="calendar_td"][text()=’29’]
30日：//td[2][@class="calendar_td"][text()=’30’]
31日：//td[3][@class="calendar_td"][text()=’31’]
左のカレンダーのXPath

年月のXPath

ヘッダー年月のXPathは、真ん中【2023年2月】については

画面要素XPath
ヘッダー年//div[@id="calendar"]/section[2]//span[1]
ヘッダー月//div[@id="calendar"]/section[2]//span[2]
真ん中のカレンダーのXPath

右のカレンダー【2023年3月】では

画面要素XPath
ヘッダー年//div[@id="calendar"]/section[3]//span[1]
ヘッダー月//div[@id="calendar"]/section[3]//span[2]
前月「＜」ボタン//a[@id="prev"]
右のカレンダーのXPath

ですので、左のカレンダーはsection[1]、真ん中のカレンダーはsection[2]、右のカレンダーはsection[3]となります。

月は<section>で指定

日のXPath

sectionで対象月を指定しますので、1月のクリック対象日は

年月日XPath
2023/1/1//section[1]//td[1][@class="calendar_td"][text()=’1′]
2023/1/2//section[1]//td[2][@class="calendar_td"][text()=’2′]

となりますが、2月分を

年月日XPath
2023/2/1//section[2]//td[1][@class="calendar_td"][text()=’1′]
2023/2/2//section[2]//td[2][@class="calendar_td"][text()=’2′]

とすると、要素を取得できません。

XPath取得ツールの結果

1月1日はカレンダーの１番左の列ですが、２月1日は3番目の列にあります。それにも関わらず、td[1]と1列目を検索しているのが原因です。

列番号の部分を削除しても、使用クラス（calendar_td）と表示日付を手掛かりに要素を取得することが可能です。

XPath取得ツールの結果

よって、日のXPathは以下のようになります。

年月日XPath
2023/1/1//section[1]//td[@class="calendar_td"][text()=’1′]
2023/1/2//section[1]//td[@class="calendar_td"][text()=’2′]
2023/2/1//section[2]//td[@class="calendar_td"][text()=’1′]
2023/2/2//section[2]//td[@class="calendar_td"][text()=’2′]
2023/3/1//section[3]//td[@class="calendar_td"][text()=’1′]
2023/3/2//section[3]//td[@class="calendar_td"][text()=’2′]

指定するXPath

まとめると以下のとおりです。

画面要素XPath
ヘッダー年左：//div[@id="calendar"]/section[1]//span[1]
中：//div[@id="calendar"]/section[2]//span[1]
右：//div[@id="calendar"]/section[3]//span[1]
ヘッダー月左：//div[@id="calendar"]/section[1]//span[2]
中：//div[@id="calendar"]/section[2]//span[2]
右：//div[@id="calendar"]/section[3]//span[2]
前月「＜」ボタン//a[@id="prev"]
次月「＞」ボタン//a[@id="next"]
クリック対象日左：//section[1]//td[@class="calendar_td"][text()=’n']
中：//section[2]//td[@class="calendar_td"][text()=’n']
右：//section[3]//td[@class="calendar_td"][text()=’n']
n：入力する年月日の日（1~31）
カレンダーのXPath

操作シナリオ

手動操作では

  • ヘッダー部分から年月を読み取る
  • 入力する日付が、過去なら「＜」ボタン、未来なら「＞」ボタンをクリック
  • ヘッダーの年月が入力日付と等しくなれば、カレンダーの日（1～31）部分をクリック

でした。

自動操作を実現するシナリオは次のようになります。

カレンダー操作シナリオ
No2~5３つあるカレンダー（section1~3）のヘッダー年月を取得し、過去なら前月ボタン、未来なら次月ボタンをクリックします。
No８CAL:DATE-VALUEで、入力値「2021/10/3」を設定しています。
No6CAL:VAR-NUMにて、No8の入力値「2021/10/3」から、日の部分（日付指定子d）を取り出し、変数「^n」に代入します。すなわち「^n=3」となります。
No7CAL:CLICKーDAYで、３つあるカレンダー（section1~3）うち、ヘッダー年月が一致したカレンダーの対象日付をクリックします。上記では「^n=3」なので、3日をクリックします。

カレンダーの対象日をクリックするために、日のXPathは、
　　//section[1~3]//td[@class="calendar_td"][text()=’n']
なので、No6で入力値の日を変数「^n」に代入しておいて、No7のXPathで「^n」を利用します。

ダウンロード

このページのシナリオファイルです。

シナリオ： date.xml

WinGoferからシナリオファイルをOPENし、Excelタブで入力シートを指定してしてください。