from selenium import webdriver
import os,time
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.common.by import By
driver_path=os.path.join(os.path.abspath(__file__),'../../driver/chromedriver.exe')
driver=webdriver.Chrome(executable_path=driver_path)
driver.get('https://www.baidu.com')
driver.maximize_window()
#1.通過id定位
driver.find_element(By.ID,"kw").send_keys("selenium id 定位")

#2.通過name定位
driver.find_element(By.NAME,"wd").send_keys("selenium name 定位")

#3.通過class_name 定位
driver.find_element(By.CLASS_NAME,"s_ipt").send_keys("selenium class_name 定位")

#4.通過 tag_name 定位，是最不準的定位，因為一個網上上同一個tag那么重復的可能性很大
driver.find_element(By.TAG_NAME,"input").send_keys("selenium tag_name 定位")

#5.通過link_text 定位
driver.find_element(By.LINK_TEXT,"新聞").click()

#6.通過partial_link_text 定位
driver.find_element(By.PARTIAL_LINK_TEXT,"新").click()

#7.通過css定位
# 7.1 絕對路徑是從網頁的根節點html開始，逐層去查找需要定位的元素。
# 此方法缺點顯而易見，當頁面元素位置發生變化時，都需要修改，因此不推薦
driver.find_element(By.CSS_SELECTOR,'html body div#wrapper div#head div.head_wrapper div.s_form div.s_form_wrapper.soutu-env-mac.soutu-env-index form#form span.bg.s_ipt_wr.quickdelete-wrap input#kw').send_keys('selenium css 絕對路徑定位')
# 備注：當同一層次有多個相同的元素時，使用id或class區分，遇到id用#號，遇到class用.

# 7.2 通過相對路徑,相對路徑表示文件中所有符合模式的元素都會被選出來，即使是處于不同的層級也會被選出來。
driver.find_element(By.CSS_SELECTOR,'#kw').send_keys('selenium css 相對定位1')
driver.find_element(By.CSS_SELECTOR,'input#kw').send_keys('selenium css 相對定位2')

# 7.3 使用元素屬性爹娘各位
# 元素屬性定位要求屬性能夠定位唯一一個元素，如果存在多個相同標簽
# 默認第一個，具體格式 //標簽名[屬性=‘屬性值’],支持使用多個屬性一起定位元素
driver.find_element(By.CSS_SELECTOR,'input[name="wd"]').send_keys('selenium css 屬性值定位')
driver.find_element(By.CSS_SELECTOR,'input[name="wd"][class="s_ipt"]').send_keys('selenium css 多屬性值定位')

# 7.4 使用部分屬性值匹配（也稱為模糊方法定位）
# 屬性值如果太長或網頁中的元素屬性動態變化，可以使用此方法
# 元素屬性值開頭包含內同： ^=driver.find_element(By.CSS_SELECTOR,'a[href^="http://news."]').click()
#元素屬性值結尾包含內容： $=driver.find_element(By.CSS_SELECTOR,'a[href$="news.baidu.com"]').click()
#圓度屬性
driver.find_element(By.CSS_SELECTOR,'a[href*="news"]').click()

# 7.5查詢子元素
# 1）子元素 A>B
driver.find_element(By.CSS_SELECTOR,'form>span>input').send_keys('css 子元素定位')
# 2）后代元素 A空格B (類似 >)
driver.find_element(By.CSS_SELECTOR,'form span input').send_keys('后代元素')
# 3）第一個后代元素： first-child
driver.find_element(By.CSS_SELECTOR,'a#s-top-username a:first-child').click()

# 4）最后一個后代元素
a=driver.find_element(By.CSS_SELECTOR,'div#u1 a:last-child')

# 5）第n個元素： nth-child
driver.find_element(By.CSS_SELECTOR,'div#u1 a:nth-child(3)').click()

# 7.6查詢兄弟元素
# 1)同層級下一個元素  +
driver.find_element(By.CSS_SELECTOR,'div#u1 a+a')
# 2）選擇同層級多個相同標簽的元素
driver.find_element(By.CSS_SELECTOR,'div#u1 a ~ a')

#8.通過xpath 定位,xpath 常用有6中定位元素方法
# 8.1 絕對路徑，角度路徑的開頭是一個斜線(/),從網頁的根節點html開始，逐層去查找需要定位
#的元素。
driver.find_element(By.XPATH,'/html/body/div[1]/div[1]/div/div[1]/div/form/span[1]/input').send_keys('xpath 絕對路徑定位')
#備注：當同一個層次有多個相同的元素時，使用下標區分，下標從1開始。

# 8.2 相對路徑的開頭是兩個斜線（//）,表示文件中所有符合模式的元素都會被找到，即使是處于樹
# 中不通的層級也會被選出來。
driver.find_element(By.XPATH,'//form/span[1]/input').send_keys('selenium xpath 相對路徑定位1')
driver.find_element_(By.XPATH,'//span[1]/input').send_keys('selenium xpath 相對路徑定位2')
# 備注：以上都可以定位到百度搜索框，相對路徑的長度和開始位置并不受限制，可以采用從后往前逐級定位
#直到定位到即可的方式去定位。

# 8.3 元素索引，遇到同層級相同標簽元素時，可以使用索引（下標）表示，縮影的初始值為1
driver.find_element(By.XPATH,'//div/div[3]/a[2]').click()

# 8.4 元素屬性,要求屬性能夠定位到唯一一個元素，如果存在多個相同標簽，默認定位第一個，
#具體隔離 //標簽名[@屬性="屬性值"] 支持使用 and 和 or 關鍵字，多個屬性一起定位
driver.find_element(By.XPATH,'//a[@href="http://news.baidu.com"]').click()
driver.find_element(By.XPATH,'//a[@href="http://news.baidu.com" or @class="mnav c-font-normal c-color-t"] ').click()
driver.find_element(By.XPATH,'//a[@href="http://news.baidu.com" and @target="_blank"]').click()

# 8.5 元素部分屬性值（也稱為模糊方法定位）
#屬性值如果太長活網頁中的元素屬性動態變化，可以使用此方法
# (1)元素屬性值開頭包含內容： start-with()
driver.find_element(By.XPATH,"//a[start-with(@name,'')]").click()

#(2)元素屬性值結尾包含內容substring()
driver.find_element(By.XPATH,"//a[substring(@href,9)='123']").click()

# (3)contains
driver.find_element(By.XPATH,"//a[contains(@href,'hao')]").click()

# 8.6 元素文本在xpath中可以通過text()函數獲取，也可以用其來進行元素定位。
driver.find_element(By.XPATH,'//a[text()="新聞"]').click()
driver.find_element(By.XPATH,'//a[contains(text(),"新")]').click()
time.sleep(3)
driver.quit()

、系統結構：

① B/S架構：Browser/Server（瀏覽器/服務器的交互形式。）

• Browser支持的語言：HTML、CSS、JavaScript；S是服務器端Server支持的語言有：C、C++、Java等
• B/S架構系統有什么優點和缺點？ 優點：升級方便，只升級服務器代碼即可，維護成本低。缺點：速度慢、體驗不好、界面不炫酷
• 企業大部分使用B/S架構
• B/S架構的系統代表有：京東、百度、天貓等

② C/S架構：Client/Server（客戶端/服務器的交互形式。）

• C/S架構的優點和缺點？
• 優點：速度快、體驗好、界面炫酷（娛樂性多數是C/S架構）
• 缺點：升級麻煩、維護成本較高。
• C/S架構的系統代表有：QQ、微信、支付寶等

2、 HTML概述

① 什么是HTML？② 怎么開發HTML？③ 怎么運行HTML?

• ① HTML：Hyper Text Markup Language（超文本標記語言）

?由大量的標簽組成，每一個標簽都有開始標簽和結束標簽。

?超文本：圖片、聲音、視頻等

• ② HTML開發使用普通的文本編輯器就行，創建擴展名是.html或.htm

?編輯器有：HBuilder、vscode等

③ 直接采用瀏覽器打開HTML文件就能運行

④ HTML是誰制定的？

• ④ W3C：世界萬維網聯盟

?W3C制定了HTML的規范：每個瀏覽器生產廠家都會遵守規范。HTML也會按照規范去寫代碼

?HTML規范目前最高的版本是：HTML5.0，簡稱H5

?我們現在主要學的HTML4.0（基本用法）

• 為了方便中國Web前端程序員開發，提供了大量幫助文檔。為開發提供方便。

?w3school：先出現的，和W3C無關

?w3cschool：后出現的，和W3C無關

?W3C制定了很多規范：HTML/XML/http協議/https協議……

3、 第一個HTML

4、基本標簽

• p：段落標記
• h1~h6：標題字，與word的標題字相同
• br：換行標記（獨目標記）
• hr：橫線（獨目標記）
• color：橫線顏色
• width：橫線寬度（可以px和%）
• pre：預留格式
• del：刪除字
• ins：插入字（有下劃線）
• b：粗體字
• i：斜體字
• sup：上標
• sub：下標
• font：字體標簽
• color：字體顏色
• size：字體大小（1~7）

頁面效果圖：

5、實體符號：為了避免和標簽沖突，所以需要使用實體符號

• <：<
• >：>
• 空格：
• 注：html中按多個空格鍵，在網頁中只顯示一個空格。

6、HTML表格

• table：表格
• tr：行
• td：列
• th：列（比td加粗居中）
• 合并行：rowspan（一個格占兩個位置）
• 注：row合并的時候，刪除下面的單元格
• 合并列：colspan（一個格占兩個位置）
• 注：col合并的時候，刪除哪個沒有要求

7、thead、tbody、tfoot標簽

• thead、tbody、tfoot不是必須的，便于后期JS編寫。

8、body的背景顏色和背景圖片

• bgcolor：背景色
• background：背景圖片
• 背景圖片在背景色的上面

9、img標簽

• src：圖片的路徑
• 只設置width，height會等比例縮放
• 只設置height，不起作用
• title：鼠標懸停時顯示的信息
• alt：設置圖片加載失敗時顯示的提示信息

10、 超鏈接或熱鏈接

• href：hot references 熱引用；
• 后面一定是一個資源的地址。
• 后面的路徑可以是絕對路徑也可以是相對路徑，可以是網絡某個資源的路徑。
• target：
• _blank：新窗口
• _self：當前窗口（默認）
• _top：頂級窗口
• _parent：父級窗口

超鏈接的作用：

通過超鏈接可以從瀏覽器向服務器發送請求。

11、request與response的概念

• request：瀏覽器向服務器發送數據（請求）
• B --》S
• response：服務器向瀏覽器發送數據（響應）
• S--》B

12、列表

• 有序列表：ol
• type：1、A、a、I、i
• 無序列表：ul
• type：circle（○）、square（□）、disc（●）

13、表單（重點）

• action：寫提交的URL地址
• method：默認get；還有post
• 表單有什么用？
• 答：收集用戶的信息。表單展現之后，用戶填寫表單，點擊提交。 （submit）
• 怎么畫一個表單？
• 答：用form標簽
• 一個網頁可以有多個表單form
• 表單最終是需要提交數據給服務器的，form標簽有一個action屬性，這個屬性用來指定服務器地址。
• action屬性用來指定數據提交給哪個服務器
• action屬性和超鏈接中的href屬性一樣。都可以向服務器發送請求（request）
• http://192.168.111.3:8080/oa/save 這是請求路徑，
• 表單提交數據最終提交給192.168.111.3機器上的8080端口對應的軟件。
• input中的type取值:
• radio：單選控件
• checkbox：多選控件
• submit：提交控件
• reset：重置控件
• button：普通控件
• text：文本控件
• password：密碼控
• file：文件控件
• 上傳文件專用
• hidden：隱藏域
• 網頁上看不到，但是表單提交的時候數據會自動提交給服務器。
• input中的value屬性用來指定按鈕上顯示的文本信息。
• 超鏈接a與表單form的區別？
• 答：表達form可以收集信息，而超鏈接a無法收集信息。
• 表單提交里面的按鈕input中屬性必須定義name，不然提交不了。
• 表單是以什么格式提交數據給服務器的？
• 格式：action?name=value&name=value&name=value..
• HTTP協議規定的，必須以這種格式提交給服務器
• java中String split('&');
• 重點強調：表單項寫了name屬性的，一律會提交給服務器。不想提交就不要寫name屬性。
• 文本框和密碼框的value不需要程序員指定，用戶輸入什么value就是什么。
• 當name沒有寫的時候，該項不會提交給服務器
• 但是當value沒有寫的時候，value的默認值是空字符串"",將空字符串提交給服務器。java代碼得到的是：String s="";

效果圖：

地址欄提交的信息：

?username=abc&userpassowrd=1234&sex=1&aihao=study&aihao=dream&myText=我沒有value屬性；&position=ln&myFile=&myHidden=

14、表單的說明：

• ① 用戶手動輸入的文本框，都不需要給value賦值
• ② textarea沒有value屬性
• ③ radio、checkbox默認選項需要使用，checked="checked"（簡寫：checked）
• ④ select中的option屬性：? selected="selected" 為默認選中 ?size：顯示條目數量
• multiple="multiple" 支持多選(select的屬性)
• ⑤ input的屬性
• readonly和disabled：
• 都是只讀不能修改
• 數據不會提交
• maxlength：設置文本框中輸入的字符數量。

15、HTML中的結點

• 在HTML文檔中，任何元素（結點）都有id屬性，id屬性是該節點的唯一標識。所以在同一個HTML文檔中id值不能重復。
• 注意：表單提交數據的時候，只和name有關系，和id無關
• id有什么作用？
• javascript語言：可以對HTML文檔中的任何節點進行增刪改操作。
• 獲取節點時，通常通過id來獲取節點
• HTML文檔是一棵樹，樹上有很多節點，每一個節點都有唯一的id（DOM樹）

16、div和span

• div和span有什么用？
• div和span都可以稱為圖層。
• 有什么用？
• 圖層的作用為了保證頁面可以靈活的布局。
• div和span是可以定位的，只要定下div的左上角的x軸和y軸坐標即可。
• div和span的區別？
• di獨占一行
• span不會獨占一行