Material-ui React Component を WebdriverIO react$ で取得してみたら失敗した → できた

5006 ワード
test React next.js Selenium WebdriverIO test テキストリンク

2019/09/06 追記
できました。詳細はここに
https://qiita.com/r315dr/items/bf12c70256c22c81c5e5

はじめに

WebdriverIOのBlogにReact Selectorsの話が出ていたので試す。
Material-uiのコンポーネントを取得してみようと思う。
ソースはここに置く

環境

  • Mac
  • Next.js
  • Material-ui
  • WebdriverIO

Getting Started

next.js with material-ui

Next.jsのGithubにはExamplesが豊富にあるので、探す。
Material-uiを見てみると、Material-uiの方をみろとあるので、こっちを見る。
書かれている通り、ソースのダウンロード&npm install&npm run devして、http://localhost:3000 にアクセス

「Go to the about page」に飛ぶと

install WebdriverIO

先ほどのディレクトリのまま、WebdriverIOをGetting Startedを参考にインストールする。

  • サービスはSelenium-Standaloneを選択した
  • baseURLはhttp://localhost:3000

いざテスト

テストコード

test/specs/basic.js
describe('material-ui component', () => {
  it('go to about page and back main page', () => {
    browser.url('/'); //baseURLで指定したのがここで活きる
    browser.$('=Go to the about page').click(); //リンク名Selector
    const button = browser.react$('Button'); //React Selector
    button.waitForExist(5000);
    button.click();
    browser.$('=Go to the about page').waitForExist(5000);
  });
});

結果

失敗・・・

console抜粋
[0-0] Error in "material-ui component go to about page and back main page"
element ("Button") still not existing after 5000ms
Spec Files:      0 passed, 1 failed, 1 total (100% completed) in 00:00:13