【Web自動テスト】プロセス分析を対象としたWebページテスト

序文

現在、テスト業界の 70% は手動テストが主流となっており、自動テストは 20% のみ、残りの 10% はパフォーマンステストです。
今は手作業で仕事をしているのに、なぜ自動化を学ぶ必要があるのかと言う人もいるかもしれません。少ない人数でより良いパフォーマンスを学びに行きますか？

実際、パフォーマンス要件は自動化要件よりも高く、それはより高いレベルです。
次に、手動テストの取り組みを見てみましょう。70% しかありません。しかし、新卒採用者数は年々増加しています。そこで、手動テストを通じて高給与に挑戦してみませんか?

中国の一般的な現象によると、手動テストの給与は後者 2 つに比べて高くありませんが、これは議論の余地のない事実であり、後者 2 つはより困難でやりがいのあるものです。

ほとんどの場合、絶対というものはありませんが、あなたの自動化が機能したばかりで、私が 4 ～ 5 年間手動テストに携わってきたと言うのであれば、もちろん比較の余地はありません。

だから基礎が悪くて現状を変えたいなら勉強するか訓練するしかない。

第1章 Web自動テストの認識

1. Web オートメーションテストを行う理由

Web自動テストとは何ですか

Web ページ上の機能を人間の代わりにプログラムに検証させるプロセス

Web 自動テストと手動テストの比較

Web オートメーションテストによって実行されるテストケースは、手動機能テストのサブセットです。
Web 自動テストの利点は効率が高いことですが、欠点は発散的な思考ができないことです。
要件が頻繁に変更される場合、Web オートメーションのテストコードのメンテナンスコストが高くなります

Web オートメーションテストに適したシナリオは何ですか

前提: 安定したバージョン、頻繁な要件変更なし
考える必要がなく、過程と結果が決まり、何度もテストを繰り返す
煙テスト
回帰試験

なぜWebオートメーションテストを行うのか

特定のシナリオ（特定のプロジェクトの品質管理環境）でのテスト効率の向上

2. エンタープライズ開発向けの主流の Web 自動テスト技術の導入

Web自動化テストの実行原理

2. Web オートメーションテストフレームワークは、操作対象の要素をどのように見つけますか

Web 自動テスト - テストフレームワークの概要

QTP: Hewlett-Packard の製品、最も人気のある Web 自動化ソフトウェア
ロボットフレームワーク: キーワード駆動型の自動テストフレームワーク
Selenium: 最も人気があり、広く使用されている自動テストフレームワーク

3. Selenium自動テストフレームワークの導入とインストール

Selenium の基本的な紹介

スクリプトの記録とコード開発の 2 つの形式の自動テストをサポート
公式サイトアドレス：https://www.selenium.dev/

Selenium が企業でできること

ウェブオートメーションテスト
クローラーアプリケーション

Webオートメーションに必要な環境

ブラウザ: Chrome
ドライバー: Webドライバー
Selenium プラグインのインストール: pip install Selenium

3. 最初の Web オートメーションプログラム

次のコードを入力した後、ブラウザ (Baidu) を開き、Python に戻って出力します: Baidu、あなたは知っています

from selenium import  webdriver
from selenium.webdriver.chrome.service import Service
# 老版本的python和selenium是这样写的
# driver = webdriver.Chrome("./chromedriver.exe")
# 下边是新版本的写法
# driver.get("http://www.baidu.com")

selenium = Service("./chromedriver.exe")
driver = webdriver.Chrome(service=Service)
driver.get("http://www.baidu.com")
print(driver.title)

第2章 Web自動テストに必要なスキル～Webフロントエンドの基礎知識～

1. Webフロントエンド開発の3要素

Webフロントエンド開発の3要素

HTMLとは何ですか?

HTML は Hypertext Markup Language であり、Web ページを記述するために使用されるマークアップ言語です。
HTML は、ブラウザーでコンテンツをレンダリングするためのタグルールの形式です。
任意のエディタで作成でき、ファイル拡張子は .html または .htm として保存できます。

CSSとは何ですか?

CSSの中国語名はカスケードスタイルシートです
HTML や XML などの文書スタイルを表すために使用されるコンピューター言語です。
Web ページを静的に変更できるだけでなく、さまざまなスクリプト言語を使用して Web ページ要素を動的にフォーマットすることもできます

JavaScriptとは何ですか?

略してJSですが、Java開発言語とは何の関係もありません
Webアプリケーションの開発で広く使用されています
JS を追加することで、Web アプリケーションはさまざまなページの動的効果を実現できます。

2. 3人の関係

3. 一般的に使用されるブラウザとそのカーネル

通常、私たちはブラウザを見ます

主要なブラウザの中核

3. HTMLタグと構文仕様

HTML タグと構文仕様
HTML タグは、山括弧で保護されたキーワードです。たとえば、
ほとんどの HTML タグはペアで表示されます
たとえば、最初のタグは開始タグ、2 番目のタグは終了タグです。
HTML タグは単独で現れることはほとんどなく、これを単一タグと呼びます
共通の単一ラベル 0 は改行を意味します
ラベル間の関係: 包含関係、並列関数

ラベルの包含関係（親子ラベル）

タグの並列関係（兄弟タグ）

開発者ツールを開く (F12)

モードを切り替えることができます

中はこんな感じです

4. HTMLの基本構造と環境構築\

HTMLの基本構造

京東のウェブサイトの構造は次のとおりです。

5. 共通のHTMLタグとHBuilder IDEのダウンロードアドレス

HBuilder ダウンロード公式 Web サイトのアドレス:

https://www.dcloud.io

公式 Web サイトにアクセスし、HBuilder の最新バージョンを無料でダウンロードします。
HBuilder には現在、Windows 用と Mac 用の 2 つのバージョンがあります。ダウンロードする際は、お使いのコンピュータに応じて適切なバージョンを選択してください。
HTML タグのリファレンスマニュアル: https://www.w3school.com.cn/tags/index.asp
これは私の最初の HTML ページです

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>这是我的第一个html页面</title>
	</head>
	<body>
		<div>我只是一个盒子，空盒子</div>
		<div>我只是一个盒子，空盒子</div>
		<h1>我只是标题1</h1>
		<h2>我只是标题2</h2>
		<h3>我只是标题3</h3>
		<p>我是段落标签我是段落标签我是段落标签我是段落标签
		签我是段落标签我是段落标签我是段落标签我是段落标签
		我是落标签我是段<br>标签我是段落标签我是段落标签
		我是段落标签</p>
		<a href="http://www.baidu.com">我是连接跳转，跳转百度</a><br>
		
		<u1>我是无序列表
			<li>第一项</li>
			<li>第二项</li>
		</u1>
		
		<ol>
		<table border="1">
			<li>第一项</li>
			<li>第二项</li>
		</ol>
		
			<tr>
				<th>标题1</th>
				<th>标题2</th>
			</tr>
			<tr>
				<td>第一行第一列</td>
				<td>第一行的第二列</td>
			</tr>
			<tr>
				<td>第二行第一列</td>
				<td>第二行第二列</td>
			</tr>
		</table>
		<select> name=""id="">
			<option value="">选项1</option>
			<option value="">选项2</option>
			<option value="">选项3</option>
		</select>
	</body>
</html>

上記で追加された
代表的な段落により、
ブラウザは次のように開きます。

6. HTML静的ページ戦闘1

<div class="box">
        <img src="./img/QQ截图20211207150902.png" class="img1">
        <div class="dec">
            <span class="z1">会员登录</span>
            <span class="z2">立即注册</span>
            <span class="z3">享积分换礼、返现等专属优惠</span>
        </div>
        <div class="line"></div>
        <div class="radio">
            <input type="radio" name="c" id="a">
            <label for="a" class="lab1">普通登录</label>
            <input type="radio" name="c" id="b">
            <label for="b" class="lab2">手机动态密码登录</label>
        </div>
        <input type="text" name="" id="" placeholder="请输入注册手机/邮箱" class="user">
        <div class="pwpwpw">
            <input type="password" name="" id="" placeholder="请输入密码" class="user1">
            <div class="yzm-img">
                获取手机动态验证码
            </div>
        </div>
        <div class="jizhu">
            <input type="checkbox" name="" id="e">
            <label for="e">30天内自动登录</label>
            <span>记住密码</span>
        </div>
        <div class="login">
            登&nbsp;&nbsp;录
        </div>
        <div class="line2"></div>
        <div class="txt">
            您也可以用合作网站的帐号登录去i旅行网
        </div>
        <div class="tu">
            <img src="./img/44.png" alt="">
        </div>
    </div>

7. CSSの基本

CSS の概要

CSS の主な機能は、Web ページを美しくし、ページレイアウトを作成することです。
具体的には、CSS はフォントサイズ、色、配置など、画像の形状、ページレイアウトや外観の表示スタイルなどを行うことができます。

2.CSSの基礎

CSS は、セレクターとマルチスタイル宣言の 2 つの部分で構成されます。

CSSスタイルコードはheadタグ内のサブタグスタイルに記述します。

3. CSS の基本のまとめ

セレクターを使用すると、HTML 内の誰のスタイルを変更する必要があるかを具体的に指定できます
セレクターの後ろの中括弧は、変更する特定のスタイル宣言です。
スタイル宣言は、key:value などのキーと値のペアの形式です。
属性と属性値はコロン (:) で区切られます。
複数のキー値を区切るには英語のセミコロン (:) を使用します。

8. CSSセレクター

CSS セレクターの役割:
さまざまなニーズに応じてさまざまなタグを選択する
CSS セレクターとは:
ラベルセレクター、クラスセレクター、ID セレクター

ラベルセレクター

IDセレクター

クラスセレクター

HTML+CSSのパフォーマンス

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>这是我的第一个html页面</title>
		<style>
			li {
				font-size: 50px;
				color: red;
			}
			ul li {
				background-color: black;
			}
			#first {
				font-size: 30px;
				color: blue;
			}
			.second{
				font-size: 20px;
				color: brown;
			}
		</style>
	</head>
	<body>
		<div id="first">我只是一个盒子，空盒子</div>
		<div class="second">我只是一个盒子，空盒子</div>
		<h1>我只是标题1</h1>
		<h2>我只是标题2</h2>
		<h3>我只是标题3</h3>
		<p>我是段落标签我是段落标签我是段落标签我是段落标签
		签我是段落标签我是段落标签我是段落标签我是段落标签
		我是落标签我是段<br>标签我是段落标签我是段落标签
		我是段落标签</p>
		<a href="http://www.baidu.com">我是连接跳转，跳转百度</a><br>
		
		<u1>我是无序列表
			<li>第一项</li>
			<li>第二项</li>
		</u1>
		
		<ol>
		<table border="1">
			<li>第一项</li>
			<li>第二项</li>
		</ol>
		
			<tr>
				<th>标题1</th>
				<th>标题2</th>
			</tr>
			<tr>
				<td>第一行第一列</td>
				<td>第一行的第二列</td>
			</tr>
			<tr>
				<td>第二行第一列</td>
				<td>第二行第二列</td>
			</tr>
		</table>
		<select> name=""id="">
			<option value="">选项1</option>
			<option value="">选项2</option>
			<option value="">选项3</option>
		</select>
	</body>
</html>

保存後、Baidu を開いて更新します。

パブリックアカウントファンのメリット

ソフトウェアテストリソースの完全なセットを無料で入手
ソフトウェアテストの面接質問ブラッシングアプレットは無料で使用できます
テスター専用の GPT の無料使用

ここに画像の説明を挿入