web页面-JS/DOM/BOM/窗口滚动/修改内容/上传文件

晒不黑的黑煤球

已于 2022-02-11 17:03:54 修改

阅读量1.5k

点赞数

分类专栏： web 文章标签： selenium python chrome

于 2021-12-02 11:22:19 首次发布

本文链接：https://blog.csdn.net/weixin_40611700/article/details/121653643

版权

web 专栏收录该内容

11 篇文章 10 订阅

订阅专栏

1.什么是JavaScript及简单编写JS代码

前端工程师学的编程语言（HTML，CSS，JavaScript，Vue）

JavaScript 负责页面的动作，跳转等动态化的效果

Vue不是编程语言，只是JavaScript的一种框架而已

为什么前端开发要学JavaScript，因为所有的浏览器都内置安装了JavaScript的运行环境

下面我们来看一下如何编写简单的JS代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>py44</title>
</head>
<body>
<!--    标题-->
<h2>hello</h2>
<form>
    <!--    下拉框-->
    <select name="myselect">
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
    </select>
</form>
<!--js脚本-->
<script>
    alert('hello!')
    // 相当于python中的print
    console.log('hello!')
    // 定义变量
    var name = 'Mara'
    console.log(name)
    let lastname = 'wang'
    console.log(lastname)
    // if
    let age = 18
    if (age >= 10) {
        console.log('已成年')
    } else {
        console.log('未成年')
    }
    // 函数
    function run() {
        console.log('run')
    }
    run()
</script>
</body>
</html>

运行结果：

在网页是看不到JS代码输出的内容，要按F12，在console下查看输出内容

一门编程语言的东西还是很多的，也没有那么容易学会的，具体的可以参考各种网站上学习 JavaScript 实例 | 菜鸟教程

2.DOM对象

DOM是文档对象模型

HTML这些标签归根结底就是字符串，不方便被程序访问和控制，因此浏览器通过DOM这种方式把文档转化成了对象，方便程序进行访问。

现在我们通过F12打开浏览器的控制台，对打开的网页进行一些简单的DOM操作。在控制台当中输入document，浏览器当中将会显示整个HTML标签内容，输入document.body显示打开页面的整个body标签。

这样通过DOM面向对象的编程方式能非常方便的获取到想要的元素，也能非常方便的执行浏览器操作。

document 是DOM对象下面的一个东西，document 不能直接说就是DOM

具体操作如下：

总结：DOM就是通过JS控制浏览器当中的页面行为

3.BOM对象

BOM是浏览器对象模型

提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作，譬如可以弹出新的窗口，改变状态栏中的文本，对Cookie的支持，IE还扩展了BOM，加入了ActiveXObject类，可以通过js脚本实例化ActiveX对象等

BOM和DOM的主要区别：

BOM的最根本对象是window，BOM和浏览器关系密切。浏览器的很多东西可以通过JavaScript控制的，例如打开新窗口、打开新选项卡（标签页）、关闭页面，把网页设为主页，或加入收藏夹等这些涉及到的对象就是BOM
DOM最根本对象是document（实际上是window.document）DOM和文档有关，这里的文档指的是网页，也就是HTML文档。网页是由服务器发送给客户端浏览器的，无论用什么浏览器，接收到的HTML都是一样的，所以DOM和浏览器无关

接着我们就要用python代码中的selenium来控制JS来进行页面操作

4.打开新窗口

import time

from selenium.webdriver import Chrome


class TestJs:
    def testjs(self):
        with Chrome() as browser:
            browser.implicitly_wait(5)
            # selenium发送JS（window.open()）代码给浏览器操作
            browser.execute_script("window.open()")
            time.sleep(5)

运行结果：

5.窗口滚动

具体代码如下：

import time

from selenium.webdriver import Chrome


class TestJs:
    def testjs(self):
        with Chrome() as browser:
            browser.implicitly_wait(5)
            browser.get('https://readhub.cn/topics')
            js = 'window.scrollTo(0,document.body.scrollHeight)'
            browser.execute_script(js)
            time.sleep(5)

还有一种页面是整个窗口有个滚动条，页面里边列表也有滚动条，如下图：

先定位列表整个元素，然后控制页面中列表进行滚动

代码具体如下：

import time

from selenium.webdriver import Chrome


class TestJs:
    def testjs(self):
        with Chrome() as browser:
            browser.implicitly_wait(5)
            browser.maximize_window()
            browser.get('https://drafts.csswg.org/cssom-view/#common-infrastructure')
            js = 'document.getElementById("toc").scrollTo(0,document.body.scrollHeight)'
            browser.execute_script(js)
            time.sleep(5)

如果想滚动1/2那就这么写：scrollTo(0,document.body.scrollHeight/2)

如果想滚动1/4那就这么写：scrollTo(0,document.body.scrollHeight/4)

6.修改元素状态

如下图，要修改12306页面当中的出发日期

具体代码如下：

第一种方法：所有的定位元素，修改值都通过js代码编写

import time

from selenium.webdriver import Chrome


class TestJs:
    def testjs(self):
        with Chrome() as browser:
            browser.implicitly_wait(5)
            browser.maximize_window()
            browser.get('https://www.12306.cn/index/')
            # js代码单行编写
            # js = 'el = document.getElementById("train_date");el.value="2021-12-16"'
            # js代码单行编写
            js = '''
            el = document.getElementById("train_date")
            el.value="2021-12-16
            '''
            browser.execute_script(js)
            time.sleep(5)

第二种方法：使用selenium定位元素，通过js代码修改值

import time

from selenium.webdriver import Chrome


class TestJs:
    def testjs(self):
        with Chrome() as browser:
            browser.implicitly_wait(5)
            browser.maximize_window()
            browser.get('https://www.12306.cn/index/')
            el = browser.find_element('id', 'train_date')
            # arguments[0]表示一个占坑符
            js = 'arguments[0].value="2021-12-16"'
            # execute_script后面可以跟多个参数，只要对应的索引号正确即可
            browser.execute_script(js, el, el, el)
            time.sleep(5)

7.文件上传

input类型，直接使用send_key()

import time

from selenium.webdriver import Chrome


class TestJs:
    def testjs(self):
        with Chrome() as browser:
            browser.implicitly_wait(5)
            browser.maximize_window()
            browser.get('file:///E:/lemon/lianxi/day33_selenuim/demo.html')
            el = browser.find_element('name', 'file')
            el.send_keys(r'E:\lemon\lianxi\day33_selenuim\2.png')
            time.sleep(5)

js类型：需要用到系统原生的组件，所有的拖动上传都会有一个隐藏的input标签，如果无法定位，先通过js修改，再定位

import time

from selenium.webdriver import Chrome


class TestJs:
    def testjs(self):
        with Chrome() as browser:
            browser.implicitly_wait(5)
            browser.maximize_window()
            browser.get('https://image.baidu.com/')
            # querySelector是查看CSS方式定位元素
            js = '''el = document.querySelector('input[type="file"]');el.style='';'''
            browser.execute_script(js)
            element = browser.find_element('xpath', '//input[@type="file"]')
            element.send_keys(r'E:\lemon\lianxi\day33_selenuim\2.png')
            time.sleep(5)

通过系统打开框上传文件

windoss平台--pywinauto
跨平台（所有系统都可以）-- pyautoui

pywinauto：

安装这个第三方库时，要注意安装0.6.x以后的版本，因为这个版本之前的没有Desktop模块

pip install pywinauto==0.6.8

注意：le.click()限制比较多，只能点击a标签，button标签等，容易出错，所以尽量换一种写法

ActionChains(browser).click(el).perform()

import time
from selenium.webdriver import Chrome, ActionChains
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as when
from selenium.webdriver.support.wait import WebDriverWait
from pywinauto import Desktop


class TestJs:
    def testjs(self):
        with Chrome() as browser:
            browser.maximize_window()
            browser.get('https://image.baidu.com/')
            el = browser.find_element(By.CSS_SELECTOR, '.st_camera_off')
            ActionChains(browser).click(el).perform()
            wait = WebDriverWait(browser, timeout=10)
            condition = when.element_to_be_clickable((By.CSS_SELECTOR, '#uploadImg'))
            file_btn = wait.until(condition)
            ActionChains(browser).click(file_btn).perform()
            app = Desktop()  # 桌面
            dialog = app['打开']  # 根据名字找到弹出窗口
            dialog['Edit'].type_keys(r'E:\lemon\lianxi\day33_selenuim\2.png')
            dialog['Button'].click()
            time.sleep(3)

pyautogui：

安装这个第三方库时，我的python是3.8版本，老是安装不上，经查确定需要先安装PyGetWindow再安装pyautogui

pip install PyGetWindow==0.0.1

pip install pyautoui

import time
from selenium.webdriver import Chrome, ActionChains
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as when
from selenium.webdriver.support.wait import WebDriverWait
import pyautogui


class TestDemo:
    def testdemo(self):
        with Chrome() as browser:
            browser.maximize_window()
            browser.get('https://image.baidu.com/')
            el = browser.find_element(By.XPATH, ' //img[@class="st_camera_off"]')
            ActionChains(browser).click(el).perform()
            wait = WebDriverWait(browser, timeout=10)
            condition = when.element_to_be_clickable((By.XPATH, '//a[@id="uploadImg"]'))
            file_btn = wait.until(condition)
            ActionChains(browser).click(file_btn).perform()
            time.sleep(1)  # 一定要有这步，不然出现用例通过，但打开选择文件窗口后定住的问题
            pyautogui.write(r'E:\lemon\lianxi\day33_selenuim\2.png')
            pyautogui.press('enter', 2)
            time.sleep(3)

晒不黑的黑煤球

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
web页面-JS/DOM/BOM/窗口滚动/修改内容/上传文件

1.什么是JavaScript及简单编写JS代码前端工程师学的编程语言（HTML，CSS，JavaScript，Vue）JavaScript负责页面的动作，跳转等动态化的效果Vue不是编程语言，只是JavaScript的一种框架而已为什么前端开发要学JavaScript，因为所有的浏览器都内置安装了JavaScript的运行环境下面我们来看一下如何编写简单的JS代码：<!DOCTYPE html><html lang="en"><head>.
复制链接

扫一扫