一、本地建立一個html檔案
（友善後面元素定位實踐，如果隻想了解元素定位内容，請直接翻到下面的第二部分内容）
pycharm裡面建立一個html檔案，粘貼以下内容儲存，然後選擇浏覽器運作檔案即可。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="main1" class="btn" data-cy=""submit>submit</button>
<button id="main2" class="btn" data-test=""submit>submit</button>
<button id="main3" class="btn" data-testid=""submit>submit</button>
<ul>
<li id="cy1">test1</li>
<li data-cy="cy2">test2</li>
<li data-test="cy3">test3</li>
<li data-testid="cy4">test4</li>
</ul>
</body>
</html>
浏覽器運作後的結果如下圖，F12打開元素定位工具。
從以上結構可以看出，ul是body的子，li是ul的子。
以下舉例内容的元素均來源于文章開頭寫的html裡面的元素，注意對比，可以自己舉一反三練習寫一個cypress的腳本，鞏固cypress中元素定位指令的用法。
二、cypress元素定位基本方法
如果有朋友使用過selenium定位元素，應該清楚selenium提供了多種元素定位方法，每種元素定位都有其對應的指定指令。而cypress的元素定位基本可以直接使用get()指令進行元素的直接定位，曾經困難選擇症不知道用selenium的哪種方法定位元素的同學，這個病有的治了！！撒花~~
1、get() 定位DOM元素
用法
cy.get(selector)
//以選擇器定位，用于篩選比對的DOM元素的選擇器。
cy.get(alias)
//以别名定位，即屬性定義的别名，連接配接.as()指令并引用@字元和别名的名稱。
舉例
1）cy.get(selector)
//找到id為main2的按鈕并點選它，确定是id定位時請使用cy.get('#idname')的方式
cy.get('#main2').click()
//找到data-cy="cy2"的元素
cy.get('[data-cy="cy2"]')
//在ul找到第1個li并斷言id=cy1
cy.get('ul li:first').should('have.id','cy1')
//查找包含btn的内容，并斷言結果有3個
cy.get('.btn').should('have.length',3)
//在指定ul中查找data-test="cy3"的元素
cy.get('ul>[data-test="cy3"]')
腳本示例
運作結果
如果腳本運作時出現網址通路失敗：通路位址404 not found、通路位址不被信任等提示，請參考下面博文内容進行解決。
《cypress運作問題–通路位址不被信任visit失敗問題解決》
2）cy.get(alias)
以下是官方文檔給出的别名的用法
//擷取“todos”元素别名
cy.get('ul#todos').as('todos')
//...hack hack hack...
//later retrieve the todos
cy.get('@todos')
//擷取“submitBTN”元素别名
beforeEach(() => {
cy.get('button[type=submit]').as('submitBtn')
})
it('disables on click', () => {
cy.get('@submitBtn').should('be.disabled')
})
//擷取“使用者”别名
beforeEach(() => {
cy.fixture('users.json').as('users')
})
it('disables on click', () => {
// access the array of users
cy.get('@users').then((users) => {
// get the first user
const user = users[0]
cy.get('header').contains(user.name)
})
})
我了解這個别名的用法大概就是
cy.get(‘元素’).as(‘别名’)
cy.get(’@别名’)
從以上定位舉例可以看出，get指令可以篩選比對目前頁面的所有DOM的元素對象。
2、find() 擷取特定選擇器的子代DOM元素
即篩選已被比對到的元素的的後代選擇器。并将結果傳回為jquery對象，注意不是元素對象。
用法
.find(selector)
舉例
//找到ul下面的li内容，并斷言一共有4個結果
cy.get('ul').find('li').should('have.length',4)
//如果直接用find找ul或者li就會報錯，下面是錯誤示範，自己也可以試一下。
cy.find('li')
運作結果
上面運作結果裡面報錯的意思是說，.find()是找已比對的元素的後代的指令，我們不能直接用cy.find()指令去定位元素，應該先用比對父母的指令在前，然後再用比對後代的元素跟在後面。就像cy.get(‘button’).click()指令一樣。
3、contains() 擷取包含指定文本的DOM元素
用法
常用的是前兩種
.contains(content)
.contains(selector, content)
.contains(content, options)
.contains(selector, content, options)
舉例
//找到包含submit的元素，contains('content')
cy.contains('submit').should('have.length',1)
//在id=main2元素中找到submit
cy.contains('#main2','submit')
//在ul的li内容中找到包含cy3的元素，contains('selector','content')
cy.contains('ul>li',"test3")
//contains指令隻能查找包含的文本内容，如果你查找的對象是id或有特定屬性的對象元素，查找就會報錯。下面是錯誤示範。
cy.contains('main1')
運作結果
上面的報錯是說明找不到包含“main1”的文本内容。我們再文章最前面寫的html檔案裡，是有main1這個東西的，報錯原因是在html檔案裡，main1是一個id屬性的值，不是文本屬性。如果你不知道什麼是文本屬性，可以簡單了解為html運作後，在界面上顯示出來的内容就是文本屬性，比如submit和test*。
另外，運作腳本中第一句：
//找到包含submit的元素，contains('content')
cy.contains('submit').should('have.length',1)
找到包含submit文本内容的元素，且結果隻有1個（html檔案内容中一共有3個submit文本内容）。也就是說明contains()指令，隻會比對到第一個符合的元素并結束比對。為了确認這個結論，我們可以打開執行界面右鍵–Inspect Element打開元素定位，然後滑鼠點選執行快照裡面的第一個contains指令，在下面元素定位控制器裡就可以看到，它比對找到了id=main1元素的submit文本内容，沒有繼續找後面的元素。
如果你想比對指定元素後的文本内容，就需要用到contains(selector,content)的指令，也就是類似于舉例中的第2和第3條舉例。
三、總結
get()指令可以定位所有DOM元素，find()指令隻能定位已比對到的元素的後代，contains()指令隻能定位包含指定文本内容的元素（一定是文本，不能是id等對象）。
如果以上内容對你有用，記得關注、點贊、收藏哦~~
下一篇計劃編寫定位iframe裡面的元素的方法！
一起加油讓時間過的更有意義！！