elenium的定位元素方式是基于html語言構建的,所以學習web自動化是很有必要去學習html
HTML
HTML 全名 HyperText Markup Language(超文本標記語言),是一種用于創建網頁的標準標記語言。常常和css js一起使用來構建漂亮的頁面。
HTML構成
HTML的元素的以 標簽、屬性、text、內嵌標簽 構成
下面以百度為例
在我們看到的頁面上展示的內容都在內嵌標簽有(head 頭部信息、body 體信息)
在web自動化測試中重要的是body里內嵌標簽中,因為展示的頁面操作都是在body 中完成的
html腦圖結構
常見HTML標簽
p : 段落 文本,代表進行換行
h1-h6:標題從H1(最大) 到H6(最?。?,標題大小
div:對html頁面進行布局,填充數據,容器,也有換行作用
span:對html頁面進行布局,填充數據,容器,在一行獨立設置樣式
ul: 將 <ul> 標簽與 <li> 標簽一起使用,創建無序列表 組合:<ul><li></li></ul>
web自動化測試的重點
a:超鏈接跳轉到頁面,需要配合 href,一般都是<a href='www.baidu.com'> </a>使用
img: 圖片的超鏈接,組合<img src="#圖片鏈接#">
iframe:
在html頁面里面嵌套html頁面 ,src 頁面鏈接 width 寬度 height 長度
組合 <iframe src="http://www.toutiao.com" width="400" height="500"></iframe>
select標簽:組合<form><selevct></select> </form>
select的作用下拉選擇框
form標簽:
form的作用form表單是前端和后端進行用戶數據交互的一種方式,前端編寫的數據可以通過form表單傳遞給后端
<form action="http://httpbin.org/post" method="post"> #數據內容#<from>
action:接口地址,根據需求更改請求的接口地址 method:請求方法
input: input:通常有name和value屬性
格式:<input type="" name="" value="">
代表輸入,基本web自動化測試都必須要測的內容
<input name> :默認屬性輸入框
組合:name 屬性 <input name="123" value=“number”>
input name屬性的作用:
當我們選擇(輸入)的數據傳遞給后端時會進行接收
input value值的作用:
后端接收的數據如果是json格式的話就會以接收{"name(123)"="value(number)"}
input type 的作用:
設定輸入格式,不設置格式,默認是text 文本輸入
<input name='password' type='password'>:
type='password':代表輸入內容帶*號,用于設置密碼框
type="text":默認是text 文本輸入
type="checkbox":代表多選
type="radio":代表單選框
type="file":選擇文件
type="submit" 提交按鈕(配合form表單使用,將form內的數據提交到后端)
input placeholder的作用:輸入框提示
input disable 的作用:
禁用輸入框,輸入框置灰,如果想輸入在F12找到該元素并且去除
input readonly 的作用:只讀輸入框
樣式代碼與演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>web自動化</title>
</head>
<form action="http://httpbin.org/post" method="post">
<div>div也是個容器,對html頁面進行布局
<h4>標題h4<span>對html頁面進行布局,這是個容器</span></h4>
<a href="http://www.toutiao.com">點擊我,跳轉頭條<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANgAAAA2CAMAAACSsKctAAAANlBMVEVHcEzuQEDwRETyRUX3TEzvQkLuQEDuQUHuQUHvQEDuQUHuQEDvQkLuQEDuQUHwQUHxQkLtQEDKaksGAAAAEXRSTlMAxiweDlyo49Nri/F5+bhLOapXaIgAAATMSURBVGje7ZrpsqQqDIAb2VEE3/9lx263AAmu3XVv1cn8mFOtIh+JIQuvFyFSzdK8/jsSrbg7BG+HSdjPZi3iJPTchR7a7iYam7mGNvwKTM5vlOQd6n3Z37IhN6zSNhW1TsJqMt/TwQk6G3gxmt0DC5/LfpxS9U38wOJ9RJN38uG4KGBR0wRNxrcHtn4dlPjpv4pCYzqEEffBfAG2XDC9sxyCUbbfH3wVDdbkS2P4FzQGRR4As8NdsEYXy01Y4xMa28C6KljT3gUDXNtYOn5fY3UwNtwEA9+XA397+zONxR03fQ1MerjG0Is4QYK5riLzEMDdC4+CuQoY99sKoW9R20z5zsKwN0gAczDFUohdPzSKRpw4j9Yp0+Jg2GgCrHBf3sAVuIytC8u4RjIwYmGOh8AMvTutfLtgydR8ZjzCgeV32M7eFlyZj2T8GY3lfHwNmChTGmcP5tECNNFBf4m4AqEGhGt8rYEj2i+AwUhwFCocgOs+ok383MFfMecdoGYUHFwkW76Jz5kiHlmQ4TtPY48+iNAnfqgX1a+vtNMueXyjvqox5WTkJFgthq3t0i2ydhY+4MsbYhKMtEu6dxFseqw1Gd+s2raasylPRgCluoJJgnnU3SYaHbS8Y4rJBv3h42AFdN1gGzwWZtgcMHD3Xk5BfYOz67qlsWKDnq3G1DP74DTCZVwQVbA1X57WpWWqk40od4svgInKBrtUPJSpfGPGyYYC6zma/OjJm0RzBcwcBONltAzKIVYxfyBObJlbFAHAtKSyOla4x+c1FiuhAxvOiDcpWBKo4GDbp3sLDA2CJR07EGCaUZYJwUys5OGgBhdYCRYFIWQQHKzrjU/AXCUdQ8C0e0+Y295XwbSsFhiS4qLUC9hePsZ2QqqVT4I3NvtgvrfbXQLxkwsYUoWsgI37uX4GbOXj231+J332DPHsXKb+cknCkC2gkZ1iLQE2RtRPgiVJq6mAadVtUKL5CAea69v9qGxxs/KTMLFrVaozYLLi7UcwrVxWY3XYtjfu32q07cOF/Ob7YKpWLm0Emewj+7m43Ud5EGzdAvjJKnz/jTbCg2B2OBIpXgBzZl9a/xFdhBChwYWXYIEYe1GYzn6fHlPIE3rJDhBBTPxIPHYng5bDObEXQqrEK34PTP+B/c/A/kzxD+wUWLB1AXVJd8cUm3Jkv1W/SpmGlsiVOUw32GxPbMVbZtA9WwneGjo+Xun/34s8hEGLqQ+AgUaVff0cDHCpJ7stSZvKTVW//vNPoXVuNV3rVQ7WVR+juRjRfLqtMeuzkWOtG2SxdtrnuehrSc9utyBpwjwB5sp23eqdI33Og5Wm6IZan3eXKz/wcc8UYdl87ZOsrUtDZmzz6xIwoU9nB2CHKw5FLGBWVkQXzrTsu4Fvw1K+JGRWmjoPiTjto6eqysMeF08NFA0chRVu8jNRyzpogXpF6rF9LuSw2MVzHtnphMxRNLgj6IasdpCBNef8B+CKj53zyI5tWOqdATsP0VP7GPoYJd1QDQuuagw2f30xj9URaFF6MM8pMPSxfa7w4FmqxtTb4YgjCOVPReQRanvgKa5TGuvQ7j9+rq5QD6aNMqRa/LffKb9JvQoR6Al9XCQyrCZCIL5eX5Z4+QEscJfekj/2D7KhSDEKe9jHAAAAAElFTkSuQmCC">
</a>
<!-- 下面是html頁面中嵌套另一個html頁面-->
</div>
<div></div>
<iframe src="http://www.toutiao.com" width="400" height="500"></iframe>
<!-- 段落-->
<p>這是第一行段落</p>
<p>這是第二行段落</p>
<p>菜單標題</p>
<ul>無序列表
<li>菜單1</li>
<li>菜單2</li>
<li>菜單3</li>
</ul>
<!-- 用戶輸入-->
username:<input name="username" placeholder="輸入賬號" >
<p></p>
password:<input type="password" name="password" placeholder="輸入密碼">
<p></p>
禁用框 <input name="text" disabled>
<p></p>
只讀框 <input name="text" placeholder="只能復制框內文字" readonly>
<p>choice you like color</p>
<div>
<!-- radio代表的意思是單選-->
<input type="radio" name="like_color" value="紅色">red
<input type="radio" name="like_color" value="藍色">blue
<input type="radio" name="like_color" value="綠色">green
</div>
<p>choice you not like color</p>
<div>
<!-- checkbox代表的意思是多選-->
<input type="checkbox" name="not_like_color">yellow
<input type="radio" name="not_like_color">white
<input type="radio" name="not_like_color">black
<p>選擇文件</p>
<input type="file" name="file" >
</div>
<p>choice you not like animal</p>
<select name="dog">
<option>dog</option>
<option>cat</option>
<option>fish</option>
</select>
<p></p>
<input type="submit" width="50" height="20" value="點擊提交">
</form>
</html>
作為web自動化測試 ,了解具體是什么意思,以及如何進行元素的定位調用即可,當然全能弄懂那當然是更好的
Web領域的一些基本概念。
Web(World Wide Web)叫全球廣域網,俗稱萬維網(www)。
W3C(World Wide Web Consortium)叫萬維網聯盟,是國際最著名的標準化組織,制定了web標準。
一個網頁包含了html元素 Css JavaScript,Html元素決定了網頁結構,Css進行了修飾美化,JavaScript控制了交互行為和動態效果。
web標準包含了下面三個方面:
Html不是一種編程語言,而是描述性的標記語言,主要作用是定義內容的結構。
2014年10月萬維網聯盟(W3C)完成了HTML5標準制定,是目前最新的HTM版本。
HTML5的出世,標志著web進入一個富客戶端(具有很強的交互性和體驗的客戶端程序)時代,像APP網頁,小程序都是HTML5的應用場景。
Html5新特性:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!--字符集-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="Author" content="">
<meta name="Keywords" content="關鍵詞" />
<meta name="Description" content="頁面描述" />
<title>頁面標題</title>
</head>
<body>
</body>
</html>
viewport用戶網頁的可視區域,一個針對移動網頁優化的頁面 viewport meta 標簽如下:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
head區域元素:
meta title style link script base。
body區域元素:
塊級元素:每個元素都是獨占一行
行內元素:元素在同一行水平排列
inline-block:元素可以排列在同一行顯示,并且可以設置一些塊元素屬性
通過Css:display:inline-block 改變元素。
很多元素都自帶了默認樣式,不同瀏覽器下默認樣式表現不一致,為了統一或者滿足一些需求我們需求將所有默認樣式清空,這種處理方式又稱為 Css Reset,比如:
*{
margin: 0;
padding: 0;
}
另外一種方案使用normalize.css,它將不同瀏覽器下的默認樣式進行了統一,
https://github.com/necolas/normalize.css
html中的單位是像素px
絕對單位
相對單位
屬性:字體、行高、顏色、大小、背景、邊框、滾動、換行、修飾屬性(粗體、斜體、下劃線)
p{
font-size: 20px; /*字體大小*/
line-height: 30px; /*行高*/
font-family: PingFang SC; /*字體類型:顯示PingFang SC,沒有就顯示默認*/
font-style: italic ; /*italic表示斜體,normal表示不傾斜*/
font-weight: bold; /*粗體或寫(400|500|600)*/
font-variant: small-caps; /*小寫變大寫*/
}
行高(line-height)
一般約定行高、字號都是偶數,這樣保證它們的差一定偶數除2得到整數,如下圖所示:
line-height
文本垂直居中
對于單行文本可以設置行高=盒子高度。
對于多行元素的垂直對齊,我們可以使用vertical-align: middle屬性,不過vertical-align 僅適用inline、inline-block 和 table-cell 元素。
vertical-align
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
/* 指定長度值 */
vertical-align: 10em;
vertical-align: 4px;
/* 使用百分比 */
vertical-align: 20%;
/* 全局值 */
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: unset;
內容溢出處理
filter:gray()
理解優先級很重要,有助于我們排查一些問題。瀏覽器將優先級分為兩部分:HTML的行內樣式和選擇器的樣式。
行內樣式
行內樣式是直接作用在元素,它的優先級高于選擇器樣式,使用!important可以提高樣式表的優先級。
<div style="font-size:16px">
</div>
選擇器樣式
<style type="text/css">
p{
font-size: 16px;
}
</style>
<link rel="stylesheet" href="style/app.css">
優先級規則如下:
優先級
我們通過下圖這種標記方式,就可以判斷出選擇器的優先級。
優先級
兩條經驗法則
由多個基礎選擇器組合成的復雜選擇器。
多個基礎選擇器連起來(中間沒有空格)組成一個復合選擇器(如:ul.nav)。復合選擇器選中的元素將匹配其全部基礎選擇器,.box.nav 可以選中 class="box nav" ,但是不能選中 class="box"。
用于選中某種特定狀態的元素,優先級(0,1,0)。
:nth-child(an+b)
更多參考:https://developer.mozilla.org/zh-CN/docs/Web/CSS
偽元素選擇器可以向HTML標記中未定義的地方插入內容,優先級(0,0,1)。
屬性選擇器用于根據HTML屬性進行匹配元素,優先級(0,1,0)。
本文要點回顧,歡迎留言交流。
網頁中文字作為信息的主要載體,非常重要,之前學習過HTML中關于文本、段落等格式的知識,這些只是簡單排版,如果想制作更好看的文本樣式,就的使用css 字體和文本樣式了。
css 字體屬性主要包括字體系列、字體大小、字體風格等其它樣式。
1、設置字體系列 —— font-family
這個屬性用來設置網頁使用哪種類型的字體顯示文本,語法如下:
font-family: "字體1","字體2","字體3"...
font-family 屬性可以定義多個字體,瀏覽器會從前到后優先選擇使用字體,當瀏覽器不支持第一個字體,則會嘗試使用第二個字體,以此類推。如果瀏覽器不支持所有字體,則使用默認字體。
如下示例:
2、字體樣式—— font-style
字體樣式有三種:
如下示例:
這里有2種斜體,它們有什么區別?
italic 和 oblique 都是向右傾斜的文字, 但區別在于 italic 是指斜體字,而 oblique 是傾斜的文字,對于沒有斜體的字體應該使用 oblique 屬性值來實現傾斜的文字效果。
3、字體大小 —— font-size
“font-size”屬性來設置字體大小,它的值可以使用預定義關鍵字、絕對大小、相對大小。
預定義關鍵字
預定義關鍵字有 xx-small、x-small、small、medium、large、x-large、xx-large,尺寸按順序依次增大。它的可選范圍只有這幾種,且不同瀏覽器廠商定義的預定義關鍵字對應的字體大小不一致,所以相同的屬性值,在不同瀏覽器看到的大小不一樣,建議不要使用這種方式。
絕對大小
絕對大小使用比如:px(像素)、pt(點,1pt 相當于 1/72in)、in(英寸)、cm(厘米)、mm(毫米)等單位設置字體大小。
如下示例:
絕對大小不會隨著頁面大小改變而改變,如果要想使文字大小自適應不同的屏幕或設備就需要使用相對大小。
相對大小:
相對大小使用 em、%、rem等來設置大小,它們都是相對于某個參考基準的字體大小,來計算當前字體的大小,只是參考基準不同而已。
如果你不指定一個字體的大小,默認大小和普通文本段落一樣,是16像素(1em=16px,100%=16px)。
em和%都是相對于父級元素的字體大小,其子級元素會在其父級元素的計算結果上繼續計算大小,如下示例:
如上p元素的字體大小是36px,而不是12px * 200%等于24px,它是在其父級div元素的計算結果上繼續計算的值。
使用em 或 %雖然可以方便修改文字大小,但是當元素嵌套很深的時候,就變得比較復雜,深層的元素文字大小就變得不可控,所以css3 新增加了rem 來設置字體大小。
rem 是相對于根元素 (html 元素) font-size屬性的值,每一層級都會參考html根元素的字體大小來計算,這樣一來,無論嵌套多少層,字體大小的計算就變得統一了。
rem 是CSS3新增的一個相對單位,IE9 以下版本的老瀏覽器卻不支持它,這也是很多編程人員尚未使用 rem 的原因。
在定義字體大小時,建議在 html 元素中定義絕大多數元素所需要的字體大小,并讓所有子元素繼承 html 的字體大小。如果某個子元素要改變字體大小,則使用相對尺寸 em 或 % 或 rem 重新定義。
4、復合屬性—— font
font 屬性可以看成是字體的簡寫,它可以定義字體系列、大小、風格、粗細、等樣式,語法如下:
font:"font-style font-variant font-weight font-size/line-height font-family"
其中font-size和font-family的值是必需的。如果缺少了其他值,將使用瀏覽器的默認值。
如下示例:
除了以上設置,font還有其它的屬性值,如下:
這些屬性,只有部分瀏覽器支持,具體使用時請查看瀏覽器是否支持。
5、其它字體屬性
字體還有 font-weight(設置粗細的屬性)、font-variant(設置小型大寫字母的字體顯示文本)如下示例:
font-weight 字體粗細:有normal、lighter、bold、數值三種,數值范圍從 100 ~ 900 依次變粗,900 相當于 bold。
font-variant值有normal(標準字體顯示)、small-caps(瀏覽器會顯示小型大寫字母的字體)、inherit(繼承父元素的設置)
如下示例:
font-variant 屬性設置小型大寫字母的字體顯示文本,這意味著所有的小寫字母均會被轉換為大寫,但是所有使用小型大寫字體的字母與其余文本相比,其字體尺寸更小。
css 文本屬性主要設置比如字符間隔,文本顏色、單詞間隔、行高、文字修飾、對齊方式等效果。
1、文字顏色 —— color
color 使用以“#”開頭16進制的顏色代碼或顏色關鍵詞(如red、blue),如下示例:
2、字符間隔 —— letter-spacing
設置字符水平間距,如下示例:
3、單詞間隔 —— word-spacing
設置單詞之間的間距,如下示例:
這里注意中文比較特殊,一個中文字不等同于英文的一個單詞。
4、行高 —— line-height
設置字體行之間垂直間距,如下示例:
5、文字修飾 —— text-decoration
可以設置文字下劃線、刪除線等樣式,如下示例:
還可以定義波浪線效果,如下示例:
6、水平對齊 —— text-align
有三種水平方向的對齊方式,居左,居中、居右,如下示例:
7、垂直對齊—— vertical-align
vertical-align 屬性設置一個元素的垂直對齊方式。
該屬性定義行內元素的基線相對于該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。在表單元格中,這個屬性會設置單元格框中的單元格內容的對齊方式。
如下示例,對齊圖片:
還有很多其它屬性,在此不每個都介紹了,可參考如下:
8、文字大小寫轉換—— text-transform
可用于所有字句變成大寫或小寫字母,或每個單詞的首字母大寫。如下示例:
9、文本縮進 —— text-indent
文本縮進屬性是用來指定文本的第一行的縮進。如下示例:
文本縮進可以使用絕對值如:px、pt、cm等,也可以是相對單位 %。且可以是負值,如果是負值,就相當于變成向左縮進了。
10、空白處理 —— white-space
white-space屬性指定元素內的空白怎樣處理。如下示例:
11、文字陰影 —— text-shadow
text-shadow 可以設置文字陰影效果,比如內陰影或外陰影,語法:
text-shadow: x坐標 y坐標 模糊大小 顏色;
其中x/y 坐標相對于文本左上角的偏移量,如下示例:
12、文本溢出 —— text-overflow
text-overflow 屬性指定當文本溢出時包含它的元素應該如何顯示??梢栽O置文本被剪切、顯示省略號 (...) 或顯示自定義字符串(不是所有瀏覽器都支持)。
text-overflow 需要配合以下兩個屬性使用:
如下示例:
本篇講述了文字和文本的大部分樣式設置,掌握這些css用法非常重要,網頁大部分都是文本,要想制作一個漂亮的頁面,這些是必須要學會的,且要學會融會貫通。
本篇主要講了以下內容:
以上都是最基本的,要多加練習,才能夠理解學會使用。感謝關注,祝學習愉快!
上篇:前端入門——css 盒子模型
*請認真填寫需求信息,我們會在24小時內與您取得聯系。