[Salesforce][WebDriverIO][XPath] SFDC の項目を参照する XPath サンプル

E2Eテストを WebDriverIO で自動化しています。
通常のフォームなどでは、項目をつかむ（参照する）には id を付与して如何様にでもすればOKです。

ref-by-id.js

 let myButton = $('#myButton');
 myButton.click();

しかし、 Salesforce のオブジェクト詳細画面などでは各項目の id は Salesforce ID っぽい規則性のない値が振られてしまうため id で参照することはできません（厳密にはできなくはないですが、項目の増減に柔軟に対応できません）。

そこで、 WebDriverIO ではセレクタに XPath が使えるので XPath で各項目のラベルから項目をつかむようにしています。
※ 注意： Lighting には非対応です。

ref-by-xpath.js

let label;
let selector;

/* 詳細画面の当該オブジェクトの各項目値を包含するブロックの参照 */
label = '項目名';
selector = "//table[@class='detailList']/tbody/tr/td[text()='" + label + "' and contains(@class, 'labelCol')]/following-sibling::td[1]/div";

/* 詳細画面上部の hover リンク（関連リストへのリンク） */
label = 'オブジェクト名';
selector = "//span[@class='listTitle' and text()='" + label + "']/parent::a";

/* 詳細画面 関連リスト内の当該オブジェクトへのリンク */
label = 'オブジェクト名';
selector = "//h3[contains(@id, '_title') and text()='" + label + "']/../../../../../../div[@class='pbBody']//tr[contains(@class, 'dataRow')]/th[@scope='row']/a";

/* 詳細画面 関連リスト内のボタン */
label = 'ボタン名';
selector = "//td[@class='pbButton']/input[@value='" + label + "']";

/* 詳細画面上での編集用オブジェクト（選択リスト) */
label = '項目名';
selector = "//table[@class='detailList']/tbody/tr/td[text()='" + label + "' and contains(@class, 'labelCol')]/following-sibling::td[1]/div[2]//select";

/* 保存ボタン */
selector = "//td[@id='topButtonRow']/input[@name='inlineEditSave']";

/* 当該オブジェクトの登録、更新画面の各項目値の入力UI */
label = '項目名';
selector = "//table[@class='detailList']/tbody/tr//*[normalize-space()='" + label + "']/../following-sibling::td[1]//*[self::input or self::select or self::textarea]";

selector でつかんだら、後は click するなり、値を check するなり、 input するなり自由にできます。

action.js

let item = $(selector);

/* クリック */
item.click();

/* 値のチェック ( chai が必要です ) */
expect(item.getText()).to.equal('項目値');

/* 値の入力 */
item.setValue('入力値'); // text or textarea
item.selectByValue('選択値'); // select
item.click(); // radio or checkbox

当然、 Salesforce の画面仕様が変われば selector は変えないといけませんが、 2018/02/21 現在はこれでいけます。