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不会独占一行