フロントエンド開発：ヒノキに基づく自動化の実践

疑似開発として、プラットフォームプロジェクトのフロントエンド開発を担当しています。開発フレームワークはvueです。この記事では、フロントエンド開発の観点から、ヒノキの使い方を紹介します。

[x] vueでヒノキを使用する方法
[x]ヒノキの走り方
[x]テストケースの書き方
[x]テストデータの問題を解決する方法
[x]発生した要素の配置の問題
[x]ヒノキの扱い方
[x]ヒノキは最高の道具ですか？
[x]テストはどうですか？

ヒノキをvueで使用する方法

m.fenfaw.cnを無料で受け取るクーポン

Vueは、Vuevue-cliプロジェクトをすばやく作成する方法を提供します。

vue create hello-world

選択したインストール項目で選択します：E2E testing-> cypress。

テストの実行方法

コマンドで開始

> npm run test:e2e

cyprss管理ウィンドウを開きます

Run all specsテストファイルをクリックまたは実行します

撮影项目管理例としてモジュールを、それだけで非常に高速である、5ユースケースを実行するために、14Sを取ります。

テストケースの書き方

フロントエンド開発からUIオートメーションのユースケースを作成するという観点からは、全体的なエクスペリエンスは依然として非常に便利です。

まず、操作するすべての要素に統一された属性を設定します。

<el-button cy-data="create-project" type="primary" @click="showCreate">创建</el-button>
...
<el-button cy-data="edit-project" type="text" size="small" @click="showEdit(scope.row)">编辑</el-button>
<el-button cy-data="delete-project" type="text" size="small" @click="deleteProject(scope.row)">删除</el-button>
...

HTMLを提示申し出を取ることをお勧めされていないid、name、class...これらの属性は、彼らは通常、例えば、指定された目的を持っているclass参照CSSスタイルに使用されています。そして、cy-data=xxxxそれは競合を避けることができ、より統一し、標準化します。

次に、ヒノキの自動化コードを書くことです

describe('项目管理', () => {
  it('添加项目', () => {
    cy.visit('/#/project')
    cy.get('[cy-data=create-project]', { timeout: 3000 }).click()
    cy.wait(1000)
    cy.get('[cy-data=project-name]', { timeout: 3000 }).type('项目名称')
    cy.get('[cy-data=project-desc]', { timeout: 3000 }).type('项目备注信息')
    cy.get('[cy-data=save-button]', { timeout: 3000 }).click()  // 保存项目
  });
  // ...
})

テストデータの問題を解決する方法

インターフェースやUIがテストデータの問題に直面するかどうかに関係なく、自動化されたテストケースを作成します。たとえば、ログインをテストする場合は、最初にユーザーデータを作成する必要があり、検索をテストする場合は、最初に検索可能なデータのバッチを作成する必要があります。

このため、setUp/treaDownこれらの準備を完了するために、自動化でこれらのフィクスチャを使用して、多数の事前アクションまたは事後アクションを作成する必要があります。テストの観点からすると、これは間違いなくテストケースをより複雑にし、テストデータが原因で自動化のユースケースを失敗させる可能性があります。

では、フロントエンド開発はどのように機能しますか？その前に、まず開発プロセスを理解する必要があります。

プロジェクト開発プロセス中。開発作業をよりスムーズに完了するために、フロントエンドは、バックエンドがインターフェイスを開発するまで待ってからフロントエンド関数を手書きすることはできません。したがって、インターフェイスがバックエンドで定義された後、インターフェイスデータは次のようになります。モック開発を対象としたモックを介してシミュレートされます。

そのため、モック指向の開発の過程では、フロントエンドとバックエンドでインターフェースパラメータを調整する必要があります。たとえば、フロントエンドでフィールドを追加したり、バックエンドでデータ構造を調整する必要があると言ったりします。調整済み。

私たちは、インターネットYAPI定義されたインタフェースを使用して、彼はランダムに生成されたモックデータを定義することができ、各フィールドのデータをランダムに生成することができ、例えば、name、email、datatimeなどが挙げられます。

次のリンクからモックインターフェースに直接アクセスできます。

https://yapi.baidu.com/mock/40650/api/v1/projects/list

vueプロジェクトでさまざまな環境を構成するにはどうすればよいですか？あなたはvue開発を学ぶ必要があります...

要素の配置で発生した問題

ただし、各要素に測位方法を追加することは、私たちが考えるほど簡単ではない場合があります。

フロントエンドUI（element-uiなど）ライブラリを使用したことがある場合、すべてのページ要素が純粋にHTMLで手書きされているわけではないことがわかります。たとえば、次のポップアップウィンドウ。

element-UIによる実装はこんな感じ。

<template>
  <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({ type: 'success',  message: '删除成功!' });
        }).catch(() => {
          this.$message({ type: 'info', message: '已取消删除' });          
        });
      }
    }
  }
</script>

要素-UIレンダリングを完全にポップ、我々はどこにもない确定、取消などのボタンに加えて、専用のプロパティの位置など。現時点では、フロントエンド開発には利点がありません。フロントエンドページで要素を正直に見つけて、複雑なcssポジショニングを作成する必要があります。

ただし、配置をカスタマイズしても、要素が一意でない場合があります。例えば

上記のリストの場合自定义定位、結果は要素のセットです。ただし、要素のグループだけの場合は、個別に取り出す必要はありません。上図のように、リストには4つの要素があり、配置によって8つの要素が取得され、最初の4つは非表示になっています。データはYAPIによってランダムに生成され、5番目の表示要素は操作できないため、これは使用される要素UIライブラリに関連しています。ヒノキはforce非常に便利で、隠された要素を強制的に作動させました。

cy.get('[cy-data=edit-project]', { timeout: 3000 }).first().click({ force: true })

ヒノキの見方

フロントエンド開発の視点

フロントエンド開発者として、客観的に言えば、ヒノキを使用するプロセスはあまり抵抗に遭遇しませんでした。要約させてください。

yapiを使用しているため、テストデータの作成を考慮する必要はありません。
主に現在のビジネス機能の操作手順が長すぎないため、依存するステップを記述する必要はありません。
ほとんどの場合、要素の属性をカスタマイズでき、ポジショニングに多くの時間を費やす必要はなく、長すぎるポジショニングを記述する必要もありません。
テストの実行速度は許容範囲内であり、28のユースケースの実行には約80秒かかります。

テストの視点

自動テストとして、ヒノキを使わせていただければ。

データの正しさを確認するために、開発者にyapiの偽のデータを使用するように依頼することはできないため、データを自分で準備する必要があります。
事業の状況に応じて、必要な前後の行動は避けられません。
統一されたカスタム要素の開発を納得させるのは少し難しいですが、不可能ではないと言います！
サイプレスはセレンよりも高速にUIオートメーションを実行しますが、セレンと比較して、より多くのブラウザーをサポートせず、グリッドリモート呼び出しをサポートせず、習熟度に基づいて言語を選択することもできません。したがって、ヒノキの利点は圧倒的ではなく、詳細は依然として需要に依存します。

ヒノキは最高の道具ですか

サイプレスはすべてのUIオートメーションに最適なツールですか？

Vue/Reactサイプレスは確かにフロントエンド開発フレームワークにうまく統合されているため、使用がより便利になります。

Seleniumは、私が接触した部分的なバックエンドdjango Webフレームワークにうまく統合されており、同様の効果を実現することもできます。以前に「Pythonを使用したテスト駆動開発」を読んだことがあります。この本は、SeleniumベースのUIテストとDjango開発を組み合わせたものです。

したがって、結論は、開発フレームワークと組み合わせて適切なE2Eテストツールを選択することです。

テストはどうですか？

長い間、UI自動化テストは、UI自動化テストを実行できるようにするという高レベルの目標を持って、テストによって実行する必要があると自然に信じてきました。しかし、上記の私の実践から、実際には、UIオートメーション用に開発することの利点は明らかであることがわかります。では、テストはどうですか？関数を正直にテストするためだけに戻ることはできますか？もちろん違います。

すべての開発者がUI自動化テストの作成方法を知っているわけではありませんが、特に難しいことではありません。私たちはこの点で「コーチ」になり、開発者にUI自動化テストの作成方法とより包括的なテストケースの設計方法を教えます。
すべてのチームの開発チームがUI自動化テストを作成する時間がない、または作成したくないというわけではないので、参加してみませんか？先ほど紹介したように、私はプロジェクトの自動テストの準備に深く関わっています。そうする代わりに、プロジェクト開発と自動テストは完全に分離され、別々に実行されます。

春節の時期に「GoogleTestMethod」を読み直して、新しい感覚があります。十分なテスト開発能力を前提に、チームの目標が製品の品質向上である場合、誰が自動テストは無関係になりますか。とても重要です。