軟件測試/測試開發(fā)/全日制/測試管理丨CSS Selector

SS Selector是一種用于定位HTML文檔中元素的一種方法。在自動(dòng)化測試中，特別是Web自動(dòng)化測試中，CSS選擇器常用于定位頁面元素。以下是一些常見的CSS選擇器示例：

通過標(biāo)簽名定位：

div: 選擇所有 <div> 元素。
p: 選擇所有 <p> 段落元素。

通過類名定位：

.classname: 選擇所有具有指定類名的元素。例如，.header 選擇所有類名為 "header" 的元素。

通過ID定位：

#id: 選擇具有指定ID的元素。例如，#username 選擇ID為 "username" 的元素。

通過屬性定位：

[attribute=value]: 選擇具有指定屬性和值的元素。例如，[type=text] 選擇所有 type 屬性為 "text" 的元素。

通過后代關(guān)系定位：

ancestor descendant: 選擇祖先元素下的后代元素。例如，.container p 選擇類名為 "container" 的元素下所有的 <p> 元素。

通過子元素關(guān)系定位：

parent > child: 選擇父元素下直接的子元素。例如，.menu > li 選擇類名為 "menu" 的元素下所有直接的 <li> 子元素。

通過偽類定位：

:first-child: 選擇父元素下的第一個(gè)子元素。
:last-child: 選擇父元素下的最后一個(gè)子元素。
:nth-child(n): 選擇父元素下的第 n 個(gè)子元素。例如，:nth-child(2) 選擇父元素下的第二個(gè)子元素。

通過屬性值的部分匹配：

[attribute*=value]: 選擇具有包含指定值的屬性的元素。例如，[class*=button] 選擇所有類名中包含 "button" 的元素。

課程詳情

Python開發(fā)必備基礎(chǔ)技能與項(xiàng)目實(shí)戰(zhàn)

Pvthon 編程語言/算法和數(shù)據(jù)結(jié)構(gòu)/面向?qū)ο缶幊蘔eb后端開發(fā)/前端開發(fā)/測試管理平臺項(xiàng)目實(shí)戰(zhàn)

人工智能ChatGPT實(shí)戰(zhàn)

人工智能輔助學(xué)習(xí)各種開發(fā)和測試技能/Pytorch深度學(xué)框架/平臺開發(fā)實(shí)戰(zhàn)

數(shù)據(jù)分析與自動(dòng)化辦公

數(shù)據(jù)采集/Pandas與數(shù)據(jù)處理技術(shù)/ECharts與數(shù)據(jù)可視化技術(shù)/爬蟲實(shí)戰(zhàn)/自動(dòng)化辦公/批量文件處理

UI自動(dòng)化測試與高級項(xiàng)目實(shí)戰(zhàn)

Web自動(dòng)化測試/App自動(dòng)化測試/ PageObject設(shè)計(jì)模式

接口自動(dòng)化測試

接口協(xié)議分析/Mock實(shí)戰(zhàn)/服務(wù)端接口測試

性能測試

性能測試流程與方法/JMeter 腳本參數(shù)化/Grafana監(jiān)控系統(tǒng)搭建

簡歷指導(dǎo)與模擬面試

1V1簡歷指導(dǎo)/模擬真實(shí)面試/測試開發(fā)崗面試全攻略名企私教服務(wù) 名企專家1v1輔導(dǎo)/行業(yè)專家技術(shù)指導(dǎo)/針對性解決工作難題/績效提升輔導(dǎo)與晉升復(fù)盤

課程亮點(diǎn)

名企私教服務(wù) 先學(xué)習(xí)后付費(fèi) 高額獎(jiǎng)學(xué)金

專屬社群+晚自習(xí)在線答疑

5V1全方位輔導(dǎo)作業(yè)+考試強(qiáng)化學(xué)習(xí)效果

簡歷修改模擬面試就業(yè)內(nèi)推面試復(fù)盤

福利一：測試開發(fā)精品課免費(fèi)學(xué)

福利二：免費(fèi)領(lǐng)取技能圖譜&大廠面試題合集

、什么是HTML

HTML簡介

HTML是用來描述網(wǎng)頁的一種語言，它是一種超文本標(biāo)記語言，由一套標(biāo)記標(biāo)簽組成，在制作網(wǎng)頁時(shí)，HTML使用標(biāo)記標(biāo)簽來描述網(wǎng)頁。

發(fā)展史

HTML：Hyper Text Markup Language超文本標(biāo)記語言

超文本標(biāo)記語言—在1993年6月互聯(lián)網(wǎng)工程工作小組工作案發(fā)布（并非標(biāo)準(zhǔn)）

HTML2.0—1995年11月作為RFC1866發(fā)布，在RFC2854于2000年6月發(fā)布之后被宣布過時(shí)。

HTML3.2—1996年1月14日，W3C推薦標(biāo)準(zhǔn)

HTML4.0—1997年12月18日，W3C推薦標(biāo)準(zhǔn)

HTML4.01（微小改進(jìn)）—1999年12月24日，W3C推薦標(biāo)準(zhǔn)，2000年5月15日發(fā)布基本嚴(yán)格的HTML4.01語法，是國標(biāo)標(biāo)準(zhǔn)化組織和國際電工委員會的標(biāo)準(zhǔn)

XHTML1.0—發(fā)布于2000年1月26日，是W3C推薦標(biāo)準(zhǔn)，后來經(jīng)過修訂于2002年8月1日重新發(fā)布

XHTML1.1—2001年5月31日發(fā)布

XHTML2.0是W3C的工作草案，由于改動(dòng)過大，學(xué)習(xí)這個(gè)新技術(shù)的成本過高而最終胎死腹中，因此，現(xiàn)在最常用的還是XHTML1.0標(biāo)準(zhǔn)。

目前最新的版本為HTML5，它是2004年被提出，2007年被W3C接納并成立新的HTML工作團(tuán)隊(duì)，

2008年1月22日公布HTML5第一份正式草案，

2012年12月17日HTML5規(guī)范正式定稿，

2013年5月6日，HTML5.1正式草案公布。

HTML 5作為最新版本，提供了一些新的元素和一些有趣的新特性，同時(shí)也建立了一些新的規(guī)則。這些元素、特性和規(guī)則的建立，提供了許多新的網(wǎng)頁功能，如使用網(wǎng)頁實(shí)現(xiàn)動(dòng)態(tài)渲染圖形、圖表、圖像和動(dòng)畫，以及不需要安裝任何插件直接使用網(wǎng)頁播放視頻等。目前企業(yè)開發(fā)中也在增大使用HTML5的力度

HTML的優(yōu)勢

各大瀏覽器廠商對H5的支持
市場的需求
跨平臺

二、HTML的基本結(jié)構(gòu)

<html>......</html> HTML文檔的開始和結(jié)束標(biāo)記。
<head>……</head> 頭控制標(biāo)記，不在界面上進(jìn)行展示，子標(biāo)簽可設(shè)置SEO優(yōu)化的一些內(nèi)容以及設(shè)置網(wǎng)頁的編碼。
<title>……</title>：設(shè)置瀏覽器的窗口上標(biāo)題。
<body>……</body>：頁面可見內(nèi)容。

三、HTML的基本標(biāo)簽

標(biāo)題標(biāo)簽

h1~h6

源代碼

<!DOCTYPE html>

<head>

</head>

<body>

<h1>這是一級標(biāo)題</h1>

<h2>這是二級標(biāo)題</h2>

<h3>這是三級標(biāo)題</h3>

<h4>這是四級標(biāo)題</h4>

<h5>這是五級標(biāo)題</h5>

<h6>這是六級標(biāo)題</h6>

<h7>這是七級標(biāo)題</h7>效果怎么顯示不出來呢？？？

<h1>這是一級標(biāo)題</h1>

</body>

</html>

瀏覽器預(yù)覽效果

段落標(biāo)簽和換行標(biāo)簽

p標(biāo)簽為段落標(biāo)簽，br標(biāo)簽為換行標(biāo)簽

源代碼

<!DOCTYPE html>

<head>

<title>段落和換行標(biāo)簽</title>

</head>

<body>

<h1>北京歡迎你</h1>

<p>北京歡迎你，<br>為你開天辟地</p>

<p>北京歡迎你，<br/>有有勇氣就會有奇跡</p>

</body>

</html>

瀏覽器預(yù)覽效果圖

水平線標(biāo)簽

hr標(biāo)簽為水平線標(biāo)簽

源代碼

<!DOCTYPE html>

<head>

</head>

<body>

<h1>漂洋過海來看你</h1>

<hr>

<p>為你我用了半年的積蓄，<br>漂洋過海來看你</p>

<hr/>

</body>

</html>

瀏覽器預(yù)覽效果圖

字體樣式標(biāo)簽

em為斜體標(biāo)簽，strong為字體加粗標(biāo)簽

源代碼

<!DOCTYPE html>

<head>

<title>字體樣式標(biāo)簽</title>

</head>

<body>

<h1>漂洋過海來看你</h1>

<hr>

<p>為你我用了<em>2017</em>半年的<strong><em>積蓄</em></strong>，<br>

<em><strong>漂洋過海</strong></em>來看你

</p>

<hr/>

</body>

</html>

瀏覽器預(yù)覽效果圖

注釋和特殊符號

注釋使用：

大于號：> great than的縮寫

小于號：< less than的縮寫

雙引號：""

版權(quán)符號：©

空格：

源代碼

<!DOCTYPE html>

<head>

<title>注釋和特殊符號</title>

</head>

<body>

<pre>

注釋使用：

大于號：> great than的縮寫

小于號：< less than的縮寫

雙引號：""

版權(quán)符號：©

空格：

</pre>

5<10>6 <br>

"我是被雙引號引起來的內(nèi)容"<br>

我是測試空格的

</body>

</html>

瀏覽器預(yù)覽效果圖

以上就是HTML的簡單入門，后續(xù)帶大家更深入的了解HTML

伙伴們，用python做接口自動(dòng)化是不是寫代碼比較繁瑣，而且沒有python代碼基礎(chǔ)的小伙伴根本無從下手對吧！今天我們來學(xué)習(xí)一下如何使用JMeter工具實(shí)現(xiàn)接口自動(dòng)化測試。

01 安裝

1、安裝JDK，配置java環(huán)境變量（安裝過程略）

2、安裝Jmeter（安裝過程略）

3、安裝ANT

3.1、下載安裝

下載地址：http://ant.apache.org/bindownload.cgi

3.1.1、下載后解壓到指定位置即可，比如：F:\apache-Ant

3.1.2、將jmeter所在的目錄下extras子目錄里的ant-jmeter-1.1.1.jar復(fù)制到ant所在目錄lib子目錄之下，這樣ant運(yùn)行時(shí)才能找到”

org.programmerplanet.ant.taskdefs.jmeter.JMeterTask”這個(gè)類，從而成功觸發(fā)JMeter腳本。

3.2、配置環(huán)境變量

添加環(huán)境變量（以windows為例）

ANT_HOME F:\apache-Ant

CLASSPATH %ANT_HOME%\lib

Path %ANT_HOME%\bin

3.3、驗(yàn)證安裝結(jié)果,命令行輸入ant -version，出現(xiàn)版本信息則安裝成功

2 ANT與Jmeter

4.配置ANT與Jmeter的配置文件

4.1.1、配置ANT配置ant編譯文件build.xml

拷貝下面的內(nèi)容與新建的txt文件中，并將此文件改名為：build.xml

<?xml version="1.0" encoding="utf-8"?><project name="pc" default="all" basedir="F:\apache-jmeter-5.0\jmeterAutoTest">
    <tstamp>
        <format property="time" pattern="yyyyMMddhhmm" />
    </tstamp>
    
    <property name="jmeter.home" value="F:\apache-jmeter-5.0" />
    
    <property name="jmeter.result.jtl.dir" value="F:\apache-jmeter-5.0\jmeterAutoTest\pc\resultlog\jtl" />
        
    <property name="jmeter.result.html.dir" value="F:\apache-jmeter-5.0\jmeterAutoTest\pc\resultlog\html" />
    
    <property name="ReportName" value="TestReport" />
  
    <property name="jmeter.result.htmlName" value="${jmeter.result.html.dir}/${ReportName}${time}.html" />
    <property name="jmeter.result.jtlName" value="${jmeter.result.jtl.dir}/${test}${time}.jtl" />
    
    <property name="mail_from" value="xx@163.com" />
    <property name="mail_to" value="xx@qq.com" />
    
     
    <target name="all">
        <antcall target="test" />
        <antcall target="report" />
        <antcall target="send" />
    </target>
    <target name="test">
        <taskdef name="jmeter" classname="org.programmerplanet.ant.taskdefs.jmeter.JMeterTask" />
        <jmeter jmeterhome="${jmeter.home}" resultlog="${jmeter.result.jtlName}">
            
            <testplans dir="F:\apache-jmeter-5.0\jmeterAutoTest\pc\script" />
        </jmeter>
    </target>

    <path id="xslt.classpath">
        <fileset dir="${jmeter.home}/lib" includes="xalan*.jar"/>
        <fileset dir="${jmeter.home}/lib" includes="serializer*.jar"/>
    </path>

    <target name="report">
        <xslt        classpathref="xslt.classpath"
            force="true"
        in="${jmeter.result.jtlName}" 
        out="${jmeter.result.htmlName}" 
        style="${jmeter.home}/extras/jmeter-results-detail-report_21.xsl">
            <param name="dateReport" expression="${time}"/>
    </xslt>
        
        <copy todir="${jmeter.result.html.dir}">
            <fileset dir="${jmeter.home}/extras">
                <include name="collapse.png" />
                <include name="expand.png" />
            </fileset>
        </copy>
    </target></project>

4.1.2、修改build.xml文件，按照實(shí)際的文件路徑配置好

4.1.3 、配置jmeter.properties

配置jmeter報(bào)告輸出格式為xml，在jmeter/bin目錄下jmeter.properties文件中修改jmeter.save.saveservice.output_format=csv為jmeter.save.saveservice.output_format=xml，并去掉前面的注釋符號#

4.1.4、準(zhǔn)備測試腳本數(shù)據(jù)

新建文件夾pc，pc文件夾分別新建buildfile ,resultlog,script 三個(gè)文件夾，buildfile文件夾放入build.xml文件，resultlog里分別新建html,jtl文件夾。

注：Resultlog

Html文件夾裝的是ant 轉(zhuǎn)化后的結(jié)果

Jtl文件裝的是meter生成的結(jié)果

Script：Jmeter執(zhí)行的腳本

3 測試報(bào)告

5、打開命令行進(jìn)行build.xml文件所在的目錄，輸入ant即可生成報(bào)告,報(bào)告存放在html文件夾里

生成的測試報(bào)告如下

6、測試報(bào)告優(yōu)化

用jmeter自帶的測試報(bào)告得到的測試報(bào)告信息并不是很全，這里參考網(wǎng)上的方法，做一個(gè)優(yōu)化

6.1.1、下載優(yōu)化模板jmeter-results-shanhe-me.xsl，拷貝到j(luò)meter的extras目錄中，如C:\apache-jmeter-2.12\extras

6.2.2、設(shè)置測試輸出報(bào)告要輸出的內(nèi)容，同樣在jmeter.properties中，設(shè)置需要輸出的內(nèi)容為true，并去掉前面的注釋符號#，這里全部設(shè)置成true

修改前：

修改后：

jmeter.save.saveservice.data_type=truejmeter.save.saveservice.label=truejmeter.save.saveservice.response_code=true# response_data is not currently supported for CSV outputjmeter.save.saveservice.response_data=true# Save ResponseData for failed samplesjmeter.save.saveservice.response_data.on_error=falsejmeter.save.saveservice.response_message=truejmeter.save.saveservice.successful=truejmeter.save.saveservice.thread_name=truejmeter.save.saveservice.time=truejmeter.save.saveservice.subresults=truejmeter.save.saveservice.assertions=truejmeter.save.saveservice.latency=true# Only available with HttpClient4#jmeter.save.saveservice.connect_time=truejmeter.save.saveservice.samplerData=truejmeter.save.saveservice.responseHeaders=truejmeter.save.saveservice.requestHeaders=truejmeter.save.saveservice.encoding=truejmeter.save.saveservice.bytes=true# Only available with HttpClient4
#jmeter.save.saveservice.sent_bytes=truejmeter.save.saveservice.url=truejmeter.save.saveservice.filename=truejmeter.save.saveservice.hostname=truejmeter.save.saveservice.thread_counts=truejmeter.save.saveservice.sample_count=falsejmeter.save.saveservice.idle_time=true

6.2.3、設(shè)置build文件的報(bào)告模板為優(yōu)化后的模板jmeter-results-shanhe-me.xsl

6.2.4、按前面的方式再次用ant構(gòu)建測試，查看優(yōu)化后的測試報(bào)告

在線咨詢

上一篇：html網(wǎng)頁的代碼大全
下一篇：前端常用meta標(biāo)簽的作用以及全面整理

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

軟件測試/測試開發(fā)/全日制/測試管理丨CSS Selector

通過標(biāo)簽名定位：

通過類名定位：

通過ID定位：

通過屬性定位：

通過后代關(guān)系定位：

通過子元素關(guān)系定位：

通過偽類定位：

通過屬性值的部分匹配：

推薦

課程詳情

課程亮點(diǎn)

、什么是HTML

二、HTML的基本結(jié)構(gòu)

三、HTML的基本標(biāo)簽

您的項(xiàng)目需求