selenium环境安装和web自动化基础

news2024/11/24 17:16:37

webUI自动化背景


因为web页面经常会变化,所以UI自动化测试的维护成本很高。不如接口的适用面广,所以大部分公司会做接口自动化测试,但是未必会做UI自动化测试;
UI自动化测试要做也是覆盖冒烟测试,不会到很高的覆盖率:
接口自动化测试框架覆盖率: 90%+,能做回归测试。
UI自动化测试框架覆盖率【用例】:30%-40%,能做冒烟测试【正常用例】,覆盖核心功能的页面配置,减少重复的页面操作。

webUI自动化使用工具: selenium 


【其他框架: cypress,robotframework,playwright-- 录播课程】
Selenium是用于Web应用自动化测试的工具,开源并且免费
支持Chrome、FireFox、Edge、IE、Safari等主流浏览器 【Chrome支持的最好 最稳定 推荐】
支持Java、Python、Net、Perl等编程语言进行自动化测试脚本编写
官网地址:https://selenium.dev/

selenium工具家族


selenium ide : 录制工具。 谷歌和火狐的插件。用途:录制回放bug的过程。不推荐用,录制基本都需要再修改;30分钟就学会了。

  • Firefox可以下载插件,并录制回放;可以导入成为代码脚本,也很方便。
  • 但是这个录制的功能不够灵活,比如需要做一些判断,循环控制等复杂的业务场景自动化,稳定性不太好。

selenium webdriver : 核心,重点学习的,,提供了各种语言环境的API来支持更多控制权和编写符合标准软件开发实践的应用程序

  • 结合代码(PythonJava,C#,JavaScript、Perl、PHP,Ruby)一起来完成自动化。
  • 提供了非常多的浏览器网页操作的接口【api】

selenium grid : 分布式测试,通过Selenium Grid可以将自动化测试脚本分发到不同的测试机器中执行;用例分布不同的设备上运行,提高运行效率。

Selenium及其相关驱动和浏览器的安装使用步骤

1、pip install selenium==4.3.0,最好指定版本安装,因为不同的版本可能会有一些兼容
性的问题。         

  • 注意: 检查一下你电脑的urllib3的版本,pip show urllib3 ,如果是2.x 以上的版本,会有兼容性问题。pip uninstall urllib3 ,pip install urllib3==1.26.15 【执行版本安装】

2、下载浏览器驱动:注意 驱动程序要与浏览器的类型和版本匹配。

  • 驱动程序放在了Python的安装目录下:selenium会自动从path环境变量中去找这个驱动文件;如果驱动不在Python安装目录 就需要加参数初始化。

浏览器安装文件及对应的驱动: 

浏览器安装文件下载地址对应驱动下载地址
Chrome
【稳定
推荐】
Google Chrome 64bit Windows版_chrome浏览器,chrome插件,谷歌浏览器下载,谈笑有鸿儒CNPM Binaries Mirror
FirefoxMicrosoft Edge WebDriver | Microsoft Edge Developerhttps://npm.taobao.org/mirrors/geckodriver/
Edgehttps://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/Microsoft Edge WebDriver | Microsoft Edge Developer
IE -
old,不
推荐
驱动版本需求与selenium保持一致,建议使用32位的
IE驱动,兼容性更好
http://selenium-release.storage.googleapis.com/index.html

3、装好浏览器,正确安装。最好在默认的路径下。一定要记得关闭自动更新。

  • 特别注意:chrome浏览器关闭自动更新: https://blog.csdn.net/weixin_48337566/article/details/123242827
  • 火狐浏览器关闭自动更新: https://www.lmlphp.com/user/58724/article/item/840150/
  • 一旦浏览器自动升级了,原来的驱动就会不能用了,所以一定要记得关闭这个自动更新!

4、测试:能否利用代码打开浏览器。

from selenium import webdriver
# 启动与浏览器的会话。打开浏览器,同时也会去启动驱动程序。chrome.driver启动后 就是一个IP+ 端
口,就是启动了一个服务。
driver = webdriver.Chrome()
# 打开谷歌浏览器,然后访问百度首页。
driver.get("http://www.baidu.com")
# 关闭当前正在使用的窗口。
driver.close()
# # 主动结束与浏览器的会话,关闭浏览器,关闭驱动程序。
# driver.quit()

页面常用的操作

"""
因为页面执行速度很快,UI需要加一些等待。-- 为了就看清楚
time.sleep(1)  == 时间是秒的单位

"""

from selenium import webdriver
import time

# 启动一个空的浏览器程序,建立了浏览器的会话 后续的操作都是在这个会话上面做的,存在一个变量里 driver
driver = webdriver.Chrome() # 注意: Chrome 大写的,后面有括号; 写错了会有问题
# 第二步: 在启动的浏览器里输入网址 打开网站
driver.get("https://www.baidu.com/")

# 页面常用操作
# 1、最大化窗口
driver.maximize_window()

time.sleep(2)

# 2、刷新页面
driver.refresh()
time.sleep(2)

# 3、打开新的页面网址
driver.get("https://www.lagou.com/wn/")
time.sleep(2)

# 4、回退到上一个页面
driver.back()
time.sleep(2)

# 5、前进到下一个页面
driver.forward()
time.sleep(2)

# 6、获取页面源码
# print(driver.page_source)

# 7、获取页面的标题
print(driver.title)

# 8、获取页面的url
print(driver.current_url)

# 9、执行完用例之后 把打开的浏览器关闭
driver.close()
# driver.quit()

quit和close的区别


driver.close():关闭当前正在使用的窗口。

  • 1、如果你的当前浏览器窗口只有一个情况下,它就会关闭窗口并且关闭浏览器
  • 2、如果你的当前浏览器窗口有多个的情况下,它就会关闭driver驱动焦点所在的窗口

driver.quit():真正关闭浏览器(把所有的窗口都关闭,并且退出浏览器,关闭驱动程序)
进阶的用法:

  • 获取页面的url地址
  • 获取页面的标题
  • 获取页面源码
# 6、获取页面源码
# print(driver.page_source)

# 7、获取页面的标题
print(driver.title)

# 8、获取页面的url
print(driver.current_url)

元素定位方法

并不是所有的页面内容都有直接对应的方法进行操作的,更多的内容操作需要使用特定方法进行元素的定位。要进行元素定位,需要先知道HTML页面的组成部分:

HTML页面的组成:HTML+CSS+javascript

1、HTML 是用来描述网页的一种语言。 指的是超文本标记语言 (Hyper Text Markup Language) ,HTML 不是一种编程语言,而是一种标记语言 (markup language)

  • 负责定义页面呈现的内容:标签语言:<标签名>标签值</标签名>,每一种类型的元素都有自己独特的标签名来表示,是为了表达页面的内容,有统一的表达标准。
  • 了解html网页结构:https://www.runoob.com/html/html-paragraphs.html --html页面是树形结 构。
  • HTML标签也可称之为元素,元素的特征: 文本内容 ----- 【通过 F12可以查看页面源码】
  • ctrl +F 可以调出来页面的 搜索框 可以用来搜索值 是否唯一。
  • 所以元素有3个特征:
    • 1、标签名 :
      • input【输入】| a【超链接】| span | button
      • HTML 标签是由尖括号包围的关键词,比如, 标签通常是成对出现的,比如 和 ,标签对中的第一个标签是标签头,第二个标签是标签尾;
    • 2、属性 :
      • HTML 元素可拥有属性 : id name class等,元素通用的属性【常见的属性】
      • id - 在当前html页面当中,独一无二的身份标识。 但是请注意,它可能是变动的(一 般有数字的都很容易变化)。== 相当于人的身份证
      • class - 在当前html页面当中,并不唯一。一个元素可以有多个class值,用空格隔 开。 (不同的元素用同样的样式设计的,很多元素class一样): class="commenttext quickinput"
      • name - 在当前html页面当中,并不唯一。一般来讲跟当前元素的功能有关。
      • style - 样式,高 宽 背景图片 ---基本很少会用于元素定位
    • 3、文本内容:标签可以拥有文本内容, 就是标签头和标签尾中间的内容:<span> text</span>

2、CSS:Cascading style sheets控制页面该如何呈现,即布局设置;比如字体颜色,字体大小,在页面呈 现的大小等。

3、Javascript:可以让你页面依据不同的情形做不同的事情。

元素的八大定位方法:【selenium的版本:4.3.0】

元素定位的目标:找到要操作的元素(唯一),然后进行操作。一定要找到唯一的元素,如果找到多个,就考虑换一个定位方法。 8大元素定位:分为2大类

代码里查找元素的方法: driver.find_element()

第一大类(6个):只根据元素的单一特征定位。 ==用的少

  • 1、id属性 : 优先选择,因为id一般都是唯一的。
    import time
    from selenium import webdriver
    from selenium.webdriver.common.by import By
    browser = webdriver.Chrome()
    browser.get("https://www.baidu.com")
    browser.find_element(By.ID,'kw').clear()
    browser.find_element(By.ID,'kw').send_keys('selenium')
    browser.find_element(By.ID,'su').click()
    time.sleep(20)
    browser.quit()
  • 2、class属性: 样式,比如颜色,宽高 大小等 ,可以修改。但是要确保class的属性值是唯一的才可以 用。
    from selenium import webdriver
    from selenium.webdriver.common.by import By
    驱动 = webdriver.Chrome()
    驱动.get("https://www.baidu.com/")
    驱动.find_element(By.CLASS_NAME,'s_ipt').send_keys("美女")
    驱动.find_element(By.ID,'su').click()
    驱动.sleep(20)
    驱动.quit()
  • 3、name属性
    from selenium import webdriver
    驱动 = webdriver.Chrome()
    from selenium.webdriver.common.by import By
    驱动.get("https://www.baidu.com")
    驱动.find_element(By.NAME,"wd").send_keys('美女')
    驱动.find_element(By.ID,'su').click()
    驱动.sleep(20)
    驱动.quit()
  • 4、tag_name属性 - 标签名 : 有多个重复的标签名,会默认找到第一个标签名 ;基本上不用,因为会 有很多个;
    from selenium import webdriver
    from selenium.webdriver.common.by import By
    驱动 = webdriver.Chrome()
    驱动.get("https://www.baidu.com")
    驱动.find_element(By.TAG_NAME,"input")
    驱动.find_element(By.ID,'su').click()
  • 5、link_text:a元素的文本内容完全匹配: a标签是一个超链接元素,超链接元素有属性target="_blank",超链接会打开一个新的窗口,否 则就是在原窗口上打开新页面 【测试派的文章元素】----注意,后面学习窗口切换会用。
    from selenium import webdriver
    from selenium.webdriver.common.by import By
    驱动 = webdriver.Chrome()
    驱动.get("https://www.baidu.com")
    驱动.find_element(By.LINK_TEXT,"hao123").click()
    驱动.sleep(20)
    驱动.quit()
  • 6、partial_link_text: a元素的文本内容部分匹配,当文本内容非常长的时候用部分匹配。
    from selenium import webdriver
    from selenium.webdriver.common.by import By
    驱动 = webdriver.Chrome()
    驱动.get("https://www.baidu.com")
    #文本精准匹配
    驱动.find_element(By.LINK_TEXT,"hao123").click()
    #文本模糊匹配
    驱动.find_element(By.PARTIAL_LINK_TEXT,'帮助').click()
    驱动.sleep(20)
    驱动.quit()

第二大类(2个):组合元素的特征以及关系来定位。 万能定位。==用的很多

  • xpath定位(相对) :万能,推荐使用,重点学习。
  • css selector:有弊端,不能支持文本定位,但是xpath可以。而且只支持web页面,app不支持。所 以不如xpath用的多。

css选择器元素定位

1、根据标签名定位 :它的问题是不唯一,一般页面中会有很多相同标签的元素,所以基本不用

driver.find_element(By.CSS_SELECTOR,"input");

2、根据ID定位

driver.find_element(By.CSS_SELECTOR,"#kw");
driver.find_element(By.CSS_SELECTOR,"标签名#id"); //使用html标签拼上#id

3、根据className定位: 可以支持多个样式一起写

driver.find_element(By.CSS_SELECTOR,".样式名");
driver.find_element(By.CSS_SELECTOR,"标签名.样式名"); //标签名拼上样式

4、单属性选择定位: 需要其他的属性一起定位,可以用标签[属性名=“属性值”]

driver.find_element(By.CSS_SELECTOR,"标签名[属性名='属性值']");

5、多属性选择定位: 如果一个属性不能唯一定位,用个属性组合

driver.find_element(By.CSS_SELECTOR,"标签名[属性1='属性值'][属性2='属性值']");

xpath元素定位:支持web页面+App页+小程序 ,高级强大,重点。

  • xpath其实就是一个path(路径),一个描述页面元素位置信息的路径,相当于元素的坐标
  • xpath基于XML文档树状结构,是XML路径语言,用来查询xml文档中的节点
  • 既可以用于XML,也可以用于HTML(因为XML与HTML结构类似,所以xpath都可以解析)

绝对路径:从根节点开始,一层一层写出来,直到要找到元素。父/子 路径和位置都涵盖 了,所以特别不稳定。

  • 从根节点(/)开始,一层一层写出来,直到要找到元素。父/子 【路径和位置依赖】 copy xpath :/html/body/div[2]/div[2]/div/div[1]/div[2]/ul/li[1]/a[2] -- 9代单传的路径。

相对路径: 以//开头,相对于某个节点的路径来找通过条件在html里面找。

在页面当中查看xpath表达式,可以匹配多少元素:F12 -- ctrl + F

第一种写法:

  • //元素标签名称[@属性=值] # 属性值是不变的。 == 区分一下css选择器 
  • //元素标签名称[text()=值] # 文本是不变的
//input[@placeholder="Say sth..."]
//a[text()="新闻"]

第二种写法:and or 来组合多个属性和文本 //元素标签名称[@属性=值 and @属性=值 and text()=值]

//a[@class="title fn__ellipsis" and @href="http://testingpai.com/article/1595507317340"]
//a[@target='_blank'and@class='mnav c-font-normal c-color-t'and text()="新闻"]

第三种:*代表通配符,表示筛选所有的标签名

//*[@id='kw']
//*[@class="sign-num"]

第四种方法:contains(text(), 包含的内容) contains(@属性名, 包含的内容)

  • 什么情况下去使用:当你的文本/属性的值过长的情况,可以通过它来简化表达式
    • 注意:写被包含的部分的时候,这部分内容必须是原始值连续的一段字串,不能是间隔的。
  • 属性包含匹配 + 文本包含匹配
    //标签名[contains(@属性名,'值')]
    #案例-百度的://span[contains(@class,'s-top-right-text')]
    //a[contains(@class,'mnav') and contains(text(),'新闻')]
    //span[contains(text(),"已有") and contains(text(),"人加入")]
    //span[contains(text(),"已有") and @class="member"]

Selenium WebDriver原理

WebDriver协议(制定通讯的规则-底层基于http协议,作为一个翻译的角色):启动驱动程序,就是http 协议 监听某个端口【就是一个服务】; 由selenium代码向他发起请求。实现各种操作。

The WebDriver Wire Protocol,由Selenium基于Http设计并定义的协议,各大浏览器厂商都提供了实现 了该协议的驱动程序(ChromeDriver,Geckodriver、EdgeDriver等),通过这套协议我们可以操作浏览 器实现各种控制动作:打开、关闭、最大化、最小化、元素定位、元素操作等等。

原理:核心部分通过统一化WebDriver协议通讯,客户端(代码段端)会发送法指令给驱动程序,驱动程 序是由不同的浏览器厂商开发的,驱动程序会自己内部将指令翻译,再去将翻译之后的指令做转发,转发 给浏览器,浏览器就能去执行对应的指令并且将结果告诉给客户端。

1、按照html页面的顺序,从上到下定位。--层级定位

写法://.......//.......//.....

  • 第一个//, 在整个html当中从上到下去查找
  • 第二个//, 以第一个//找到的元素为根元素,在它的子孙后代当中去找。
    • 注意如果是一个/ 就是儿子 不是所有的后代。
  • 示例: //div[@class="number"]//p

轴定位

什么情况下用到轴定位:如果元素之间有父子关系(儿子找爸爸)、兄弟关系 (找哥哥/找弟弟)

  • 从子孙元素,倒着找父元素或者祖先元素。
  • 从兄弟姐妹元素,顺着关系找到其它的兄弟姐妹。
    • 关系疏理:要找的元素,是已知元素的 xxx 关系。
  • 以下6个轴定位,重点关注标黑的三个:
    • 语法 : //已找到的元素/轴定位名称::元素名称[....]
轴名称释义
ancestor选择当前节点的所有祖先节点。(包括父节点)
parent选择当前节点的父节点。
child选择当前节点的所有子节点。
descendant选择当前节点的所有后代节点。
following-sibling选择当前节点之后的所有同级节点。(找弟弟)
following选择当前节点之后的所有节点,不包括后代节点。
preceding选择当前节点之前的所有节点,不包括后代节点。
preceding-sibling选择当前节点之前的所有同级节点。(找哥哥)

ancestor

//a[text()='新闻']/ancestor::div

parent   

//a[text()='新闻']/parent::div

//a[text()='新闻']/parent::div//a[text()='地图']

child 与following-sibling

//div[@class='mnav s-top-more-btn']/child::div/child::div//following-sibling::div

descendant

//div[@class='mnav s-top-more-btn']/child::div/descendant::a//div[text()='翻译']

preceding-sibling

//a[text()='网盘']/preceding-sibling::a/following-sibling::a[text()='地图']

定位到元素后代码操作 -find_element

  • find_element --- 在页面当中找到匹配的第一个元素。返回的 WebElement对象 【就算元素定位的表达式不唯一,也会返回找到第一 个元素】
  • find_elements --- 在页面当中,找到匹配的所有元素。返回的列表。列 表当中每个成员都是WebElement对象

By类中,定义了8种定位策略,可以直接导入使用:

from selenium.webdriver.common.by import By
driver.find_element(By.XPATH,"xpath表达式")

WebElement类当中定义常用的方法:

  • send_keys() --- 输入 (Keys类定义了键盘上除了26个字母和0-9数字外其 它的按键。)
  • click() --- 点击操作
  • text --- 获取元素的文本内容(页面操作之后某些元素的文本发生变化)
  • get_attribute() --- 获取元素的属性值
  • clear() --- 清除内容

如果元素定位表达式对应的元素不在页面当中,则会报错 NoSuchElementException。

from selenium import webdriver
from selenium.webdriver.common.by import By
from time import sleep
driver = webdriver.Chrome()
driver.get("http://baidu.com")
driver.maximize_window()
driver.find_element(By.ID, 'kw').clear()
sleep(2)
print(driver.find_element(By.ID, 'kw').get_attribute('class') )

driver.find_element(By.ID, 'kw').send_keys("selenium")
search_box_text = driver.find_element(By.ID, 'kw').text
print("-----------------:"+search_box_text)
sleep(2)



driver.find_element(By.ID, 'su').click
sleep(2)

driver.close()

搜索框(<input>元素)通常不会有可见的文本内容,因此search_box_text将返回一个空字符串。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1685899.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

gpt-4o考场安排

说明 &#xff1a;经过多次交互&#xff0c;前后花了几个小时&#xff0c;总算完成了基本功能。如果做到按不同层次分配考场&#xff0c;一键出打印结果就完美了。如果不想看中间“艰苦”的过程&#xff0c;请直接跳到“最后结果”及“食用方法”。中间过程还省略了一部分交互&…

集中抄表系统是什么?

1.集中抄表系统简述 集中抄表&#xff0c;又称为智能抄表&#xff0c;是一种现代化能源管理体系技术性&#xff0c;主要运用于电力工程、水、气等公共事业的计量。它通过自动化的形式收集解决大量用户的计量数据信息&#xff0c;大大提升了数据收集的效率和精确性&#xff0c;…

基于SSM实现的新生报到系统源码+数据库+论文

项目简介 基于SSM实现的新生报到系统&#xff0c;主要分为五种用户角色&#xff0c;分别是&#xff1a; 学院管理员管理所有内容&#xff0c;涵盖了班级&#xff0c;专业&#xff0c;学院&#xff0c;学生&#xff0c;缴费以及宿舍等方面的信息&#xff0c;学院管理员可以统计…

java-查询字符串当中是否包含中文

文章目录 前言java-查询字符串当中是否包含中文 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&#xff0c;写作不易啊^ _ ^。   而且听说点赞的人每天的运气都不会太差&#xff0c;实在白嫖的话&#xff0c;那欢迎常来啊…

2024电工杯数学建模A题思路模型代码

最新版完整内容见文末名片 A 题&#xff1a;园区微电网风光储协调优化配置 园区微电网由风光发电和主电网联合为负荷供电&#xff0c;为了尽量提高风光电量的 负荷占比&#xff0c;需配置较高比例的风光发电装机容量&#xff0c;但由于园区负荷与风光发电功 率时序不匹配&am…

噪声条件分数网络——NCSN原理解析

1、前言 本篇文章&#xff0c;我们讲NCSN&#xff0c;也就是噪声条件分数网络。这是宋飏老师在2019年提出的模型&#xff0c;思路与传统的生成模型大不相同&#xff0c;令人拍案叫绝&#xff01;&#xff01;&#xff01; 参考论文&#xff1a; ①Generative Modeling by Es…

IDEA设置运行内存

1.开启内存指示条​​​​​​​ 查看idea右下角​​​​​​​ 2.环境变量查看ideaVM地址&#xff0c;没有的话那就是默认的配置文件&#xff1a; idea 安装 bin 目录下 idea64.exe.vmoptions 3.去对应路径修改内存参数大小 4.重启IDEA&#xff0c;end

leetcode-主持人调度(二)-110

题目要求 思路 1.先将开始时间和结束时间拆分放到两个数组中进行排序 2.如果开始的时间小于结束时间&#xff0c;说明目前没有空闲的人&#xff0c;需要增加人&#xff0c;如果大于等于&#xff0c;说明有人刚结束了主持&#xff0c;可以进行新的主持了&#xff0c;变更到下一…

JavaEE技术之分布式事务(理论、解决方案、Seata解决分布式事务问题、Seata之原理简介、断点查看数据库表数据变化)

文章目录 JavaEE技术之分布式事务准备:1. 本地事务回顾1.1 什么是事务1.2 事务的作用1.3 事务ACID四大特性1.4 事务的并发问题1.5 MySQL事务隔离级别1.6 事务相关命令(了解)1.7 事务传播行为&#xff08;propagation behavior&#xff09;1.8 伪代码练习1.9 回滚策略1.10 超时事…

重构2:重构的原则之笔记

最近在看重构2&#xff1a;改善既有代码的设计这本书&#xff0c;对于代码重构指导非常有帮助&#xff0c;然后也是做个笔记记录下&#xff0c;以下是我阅读本书的前两章的时候整理的思维导图&#xff1a;

The Sandbox 和 Bitkub 联手增强东南亚元宇宙中心

作为去中心化游戏虚拟世界和区块链平台的先驱&#xff0c;The Sandbox 正与泰国领先的区块链网络 Bitkub Blockchain Technology Co., Ltd. 展开创新合作。双方合作的目的是将Bitkub元宇宙的影响力扩展到The Sandbox&#xff0c;建立一个元宇宙中心&#xff0c;向用户承诺从 Bi…

react使用antd警告:Warning: findDOMNode is deprecated in StrictMode.

警告信息&#xff1a; Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DOMWrap which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: htt…

SerDes系列之CTLE均衡技术

CTLE&#xff08;连续时间线性均衡&#xff09;是一种施加在接收器上的线性模拟高通滤波器&#xff0c;通过衰减低频信号分量&#xff0c;以补偿奈奎斯特频率附近的衰减比例&#xff0c;从而实现信道补偿。当低频信号分量向下衰减并推入底噪范围时&#xff0c;CTLE就会失去调节…

解决Wordpress中Cravatar头像无法访问问题

一、什么是Cravatar Gravatar是WordPress母公司Automattic推出的一个公共头像服务&#xff0c;也是WordPress默认的头像服务。但因为长城防火墙的存在&#xff0c;Gravatar在中国时不时就会被墙一下&#xff0c;比如本次从2021年2月一直到8月都是不可访问状态。 在以往的时候&…

JS 实现鼠标框选(页面选择)时返回对应的 HTML 或文案内容

JS 实现鼠标框选&#xff08;页面选择&#xff09;时返回对应的 HTML 或文案内容 一、需求背景 1、项目需求 当用户进行鼠标框选选择了页面上的内容时&#xff0c;把选择的内容进行上报。 2、需求解析 虽然这需求就一句话的事&#xff0c;但是很显然&#xff0c;没那么简单…

MySQL -- 相关知识点

1.数据库相关介绍 数据库的选择通常取决于具体的应用需求&#xff0c;如性能、扩展性、数据一致性和易用性等因素。 1. 关系型数据库&#xff08;RDBMS&#xff09; MySQL&#xff1a; 广泛使用的开源数据库&#xff0c;支持大多数操作系统。强调易用性、灵活性和广泛的社区支…

代码随想录算法训练营第36期DAY37

DAY37 先二刷昨天的3道题目&#xff0c;每种方法都写&#xff1a;是否已完成&#xff1a;是。 报告&#xff1a;134加油站的朴素法没写对。原因是&#xff1a;在if中缺少了store>0的判断&#xff0c;只给出了indexi的判断。前进法没写出来。因为忘记了总油量的判断。Sum。…

基于Vue的自定义服务说明弹窗组件的设计与实现

基于Vue的自定义服务说明弹窗组件的设计与实现 摘要 随着技术的不断发展&#xff0c;前端开发面临着越来越高的复杂性和不断变化的需求。传统开发方式往往将整个系统构建为整块应用&#xff0c;这导致对系统的任何微小改动都可能触发整体的逻辑变更&#xff0c;从而增加了开发…

第二证券:见证历史!印度这一交易所市值突破5万亿美元

又一次见证前史&#xff01; 孟买证券交易所本周实现了一个重要的里程碑&#xff0c;其市值突破5万亿美元&#xff0c;总市值在不到6个月的时间里添加了1万亿美元。 据了解&#xff0c;印度股市两大交易所别离为孟买证券交易所&#xff08;BSE&#xff09; 和国家证券交易所&…

discuzX2.5的使用心得 札记一

从开始接受php论坛的开发任务&#xff0c;对php感兴趣的我开始迷恋上discuz这个产品了&#xff0c; 像戴志康这样的创新人才&#xff0c;是我们这代人的骄傲和学习的榜样 应该是了解一下&#xff0c;啥事discuzX2.5&#xff0c;百度看一下 discuz x2.5_百度百科 看完百度词条…