前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

前端录屏 + 定位源码,帮你快速定位线上 bug

原文来源于:程序员成长指北;作者:海阔_天空

原文:https://juejin.cn/post/7173596154297810957

如有侵权,联系删除


前言

UI自动化xpath定位详解

XPath(XML Path Language)是一种用于定位 XML 文档中节点的语言,同时也广泛应用于 HTML 页面元素的定位。在 UI 自动化测试中,XPath 是非常强大且灵活的元素定位方式,可以根据元素的层级结构、属性值、文本内容等特征来准确定位元素。以下是一些常用的 XPath 定位方式及示例:

CSS position定位详解

使用CSS有普通流、绝对定位和浮动三种基本的定位机制,如果不是专门指定区块的位置都是在普通流中定位,即从上到下一个接一个地排列,位置

由元素在HTML中的位置决定。

静态定位:

文档中默认都是静态定位


软件测试学习笔记丨Selenium常见控件定位方法(八大定位方式)

Selenium常见控件定位方法

通过name属性值定位

from selenium import webdriver
import time
from selenium.webdriver.common.by import By

#自定义一个函数
def name_position_method():
#实例化chromedriver对象   
    driver = webdriver.Chrome()
#打开一个网页
    driver.get('http://www.baidu.com')
#强等3秒
    time.sleep(3)
#如果没有报错,证明元素找到了
#如果报错no such element,代表元素定位可能出错
#通过元素的name属性值查找“更多”选项,并实现点击操作
    driver.find_element(By.NAME, 'tj_briicon').click()
#强等5秒
    time.sleep(5)

#if __name__ == '__main__':的作用:限制class_name_position_method()函数只能作为本脚本内的函数直接被调用,而不能被其他脚本文件import调用
if __name__ == '__main__':  
    name_position_method()

一篇文章高效定位iframe

今天跟大家分享的是如何高效的定位iframe。我们来看一段最早的代码:

# coding: utf-8from selenium import webdriverfrom time import sleep

driver = webdriver.Firefox()
driver.get("http://blog.hexun.com/")
driver.find_element_by_id("read_btn").click()
driver.maximize_window()
sleep(3)driver.find_element_by_id("username").send_keys("账号")
driver.find_element_by_id("password").send_keys("密码")
driver.find_element_by_xpath(".//*[@id='login12']/div/div/div/div[3]/input").click()
sleep(3)
# 点击发送博客
driver.find_element_by_xpath(".//*[@id='login12']/div/div/div[3]/a[1]").click()
sleep(3)
curr = driver.current_window_handle
all_curr = driver.window_handles
for i in all_curr:    if i != curr:
        driver.switch_to.window(i)
        sleep(2)
        driver.find_element_by_id("hxjy_blog_tit").send_keys(u"我的文章")        driver.switch_to.frame(driver.find_element_by_xpath(".//*[@id='editorContainer']/iframe"))
        sleep(2)        driver.find_element_by_xpath("html/body").click()
        driver.find_element_by_xpath("html/body").send_keys(u"童林")
        driver.switch_to.default_content()
        # 页面下拉
        js = "var q=document.documentElement.scrollTop=1000"
        driver.execute_script(js)
        driver.find_element_by_xpath(".//*[@id='hxjy_blog_label']").send_keys(u"测试")
        driver.find_element_by_xpath(".//*[@id='postarticle']").click()        

【@keyframes实现牛顿摆】一个DIV和纯CSS代码,写个简单的牛顿摆



牛顿摆是一个很有趣的现象,出于好奇,我用纯CSS代码实现了一个简单的牛顿摆动画。下面是制作完成后的效果:



感兴趣的朋友可以点击下面的链接,观看完整的视频教程:

DIV+CSS技术使用技巧


一、使用 div 后,什么时候使用 table

Web标准并不排除表格的使用,但使用表格排版是不明智的,因为表格归根结底只是一种显示“数据”的方式。大家应该知道,在 Excel 中,表格就是用来放置数据信息的。使用表格显示信息能让浏览者阅读起来更轻松,表达也更清楚。

XHTML 中的元素可分为三大类,下面分别介绍。

CSS 实现两边固定宽,中间自适应

  1. Flexbox 实现

你不应该依赖CSS 100vh,这就是原因

如果有一个文本和一个按钮,我们想让文本粘在上面,而按钮粘在下面!使用CSS Flex 似乎很容易做到。

// HTML
<div className="layout">
  <p>Lorem ipsum dolor sit amet...</p>
  <button>Sign Up</button>
</div>

// CSS
.layout {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}

css 之 position 属性浅谈

定义

position 属性用来指定一个元素在网页上的位置,下午主要通过

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言