伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。...伪类的种类 伪元素的种类 区别 这里用伪类 :first-child 和伪元素 :first-letter 来进行比较。....first-child {color: red} first second 即我们给第一个子元素添加一个类... p标签下的第一个字母会变红 我们一般做法，也可以实现，同样单独加一个类 .first-letter {color: red}I 总结 伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。
定义 伪类 CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。 例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。...伪元素 伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。 下例中的 ::first-line 伪元素可改变段落首行文字的样式。 /* 每一个 元素的第一行。... p:first-letter { font-size: 5em; } 从上述例子中可以看出，伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。...因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。...总结 1.伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息； 2.伪元素本质上是创建了一个有内容的虚拟容器； 3.CSS3中伪类和伪元素的语法不同； 4.可以同时使用多个伪类，而只能同时使用一个伪元素
absolute; left: 0; right: 0; top: 0; height: 2px; } 最近在看一篇文章，网站中有一个图标...，鼠标划上去会出现一个彩色的小边，非常有趣。...效果如下： www.w3h5.com 查看代码发现标签上有一个:hover，鼠标划入时添加一个:after伪类，给这个伪类设置背景渐变、绝对定位和高度，实现了这种“炫酷”的效果。...声明：本文由w3h5原创，转载请注明出处：《利用css中的伪类 给元素设置特殊样式效果》 https://www.w3h5.com/post/51.html
Cypress 是一个非常流行的测试工具，然而实际使用过程中发现一些问题，这里做些记录。...问题发现在 Cypress 下 click 是非常常用的指令，然而在一些特殊场景下 click 并不能如想象中那般正常工作。比如现在有一个弹窗，我们需要测试在点击遮罩层时是否可以正常关闭弹窗。...，发现一切如想象中那般简单，很顺利就通过了。...结果验证那我们来验证下是不是如此，首先我们先创建一个非常小的遮挡元素，然后放在中央位置，测试下是不是会出问题。代码如下：import style from '....图片最后说实在的 Cypress 这样的遮挡检查方式不太妥当，过于简单粗暴而且很容易让人困惑。理论上而言可以使用 layer 层层比对交叉区域来判定更为妥当。不知道是不是有什么文档导致放弃了。
前言 之前分享了一系列的文章，分别从原理，运行，断言，执行，测试套件，如何跳过用例来讲解unittest，那么我们继续分享 正文 我们首先看下下面的代码 import unittestclass...我们发现在初始化的时候呢，我们每次都会初始化，但是在实际的测试中呢，我们可能会是有些参数或者动作只需要做一次即可，那么我们只能在用例中初始化一次。那么unittest里面有没有这样的方法 呢？...setUpClass(cls): pass @classmethod def tearDownClass(cls): pass 我们只需要在初始化一次的时候调用...我们将这些代码带入到我们的测试用例中，看下效果会如何。...这样我们就实现了初始化一次，清理一次的需求。
\cypress\integration\demo 3测试框架 before():相当于unittest中的def setUp(cls)方法或者Junit的@Before方法标签； after():相当于...unittest中的 def teardown(cls) 方法或者Junit的 @Before方法标签； beforeEach() : 相当于unittest中的def setUpClass(cls)...查找 cy.get('#kw') 根据元素名称查找 cy.get('input[name="wd"]') 根据元素的类名查找 cy.get('.s_ipt') 根据CSS selector查找、 cy.get...cy.get('li.selected').should('have.length',3) 正对类的断言 cy.get('from').fijd('input').should('not.have.class...cy.get('#loading').should('not.exist') 针对元素状态的State的断言 cy.get(':radio').should('be.checked') 针对CSS的断言
1.2 工具选择 端到端测试的工具也有不少，最为突出的是老牌 e2e 测试工具 NightWatch，根据需要安装 Selenium或其他Webdriver，优势是可以测试多类浏览器，兼容性好，而 Cypress...是为现代网络打造的下一代前端测试工具，安装更简单，可以测试任何在浏览器中运行的内容，测试执行效率更高，此处选用 Cypress 作为端到端测试工具。...就像官网所说，Cypress就像一个完整的烘烤箱，他还自带电池，下面是一些其它测试框架无法做到的事情： 时间旅行： Cypress在你运行测试的时候拍摄快照。...// 【 .uncheck() 】取消选中复选框 // 【 .select() 】选择一个含有 属性的元素 断言： 在 Cypress 中有两种断言写法: 隐式: 使用...() 预期元素最终存在于 DOM 中 .type() 预期元素最终为 可输入 状态 .click() 预期元素最终为 可操作 状态 .its() 预期最终找到当前主题的一个属性 */ 别名： cy.get
引言 前面一节已经讲过访问百度的脚本，现在一个登录的UI自动化案例，以禅道为例(暂时不用公司网站，最近公司信息安全管控比较严格)。 ...脚本编写 写脚本如写用例，只不过脚本是以代码的方式写，用例以汉字的方式写。...首先我们写一个登录的用例，就要捋好各个节点： 1、输入账号； 2、检查账号； 3、输入密码； 4、检查密码； 5、点击登录； 6、判断页面重定向跳转到首页； 7、判断页面包含某个文件...程序，双击脚本login_web.js 执行结果： 脚本分析 1、Cypress特性之一：实时重新加载代码。...2、最后三个断言： 一个是断言url： 3、我们知道元素定位方式一般两种： get：按 css 或元素特定属性的方式定位元素 contains：按特定字符串定位元素 所以是断言body中
cypress-io/cypresshttps://github.com/cypress-io/cypress Stars: 45.5k License: MIT picture Cypress.io...是一个快速、简单和可靠的浏览器测试工具，可以用于任何在浏览器中运行的内容。.../getmoto/moto Stars: 7.1k License: Apache-2.0 Moto 是一个允许测试轻松模拟 AWS 服务的库。...具有丰富的内省事件，并等待元素变得可操作后再执行操作，从而消除了人为超时（导致易错）。 针对动态 Web 创建断言检查，并支持重试直到满足必要条件。...测试场景可以涵盖多个选项卡、多个来源或者多用户，并针对不同用户创建不同环境进行运行。
RedHat7上安装OpenLDA并配置客户端》、《2.如何在RedHat7中实现OpenLDAP集成SSH登录并使用sssd同步用户》、《3.如何RedHat7上实现OpenLDAP的主主同步》、《4...本篇文章主要介绍如何在RedHat7的OpenLDAP中将一个用户添加到多个组中。...4.添加测试用户及用户组 ---- 这里我们添加一个测试用户faysontest2，将faysontest2用户添加到faysontest2和faysontest3组中。...用户的ldif文件中包含了用户默认的用户组faysontest2，在文件中我们使用gidNumber来添加faysontest2的用户组。...如果需要用户拥有多个组，只需要在需要加入组的条目下增加一条记录memberUid: faysontest2，faysontest2即为你用户的uid。 一个组条目下支持多个memberUid属性。
最后的断言解析 检查标签为 h1 的元素是否包含 jane.lane 断言的一般步骤 用 查询应用程序的DOM，找到元素 cy.get() 针对元素或元素列表进行断言尝试 ，我们示例中为 .should...Cypress 是全局的，不用针对元素去单独识别 Cypress 这种自动重试机制避免了在测试代码中编写硬编码等待（强制等待），使测试代码更加健壮 多重断言 在日常测试中，有时候需要多重断言，即获取元素后跟多个断言...在多重断言中，Cypress 将按顺序进行断言，即当第一个断言通过后，会进行第二个断言，通过后进行第三个断言...以此类推 列表的栗子 需求 假设一个下拉列表，存在两个选项，第一个选项是“iTesting...重试（Retry-ability）的条件 前言 Cypress 并不会重试所有命令，当命令可能改变被测应用程序的状态时，该命令将不会重试（如： ，毕竟要点击） click() Cypress 仅会重试那些查询...DOM 的命令： 、 find() 、 contains() 等 cy.get() 可以通过官方文档 Assertions 部分来检查是否重试了特定命令：https://docs.cypress.io
1.相似： 如果使用Jquery，想通过类选择器查询元素，代码如下： $('.my-selector') 在Cypress里通过类查询同样的元素，代码如下： cy.get('.my-selector')...它会立马同步返回一个空的jQuery集合，不包含我们要找的元素就立马结束了，不会去重试查询，如果有时候页面没有完全加载出来去查询，结果返回为空，但是实际上页面又有这个元素，这明显不符合我们ui自动化的需求...注：在Cypress中，当您想直接与DOM元素交互时，可以使用.then()将元素作为其第一个参数的回调函数进行调用。...百度首页 我们可以很方便的通过内容来查询获得，代码如下： cy.contains('百度首页') 这是不是很方便，当我们不知道控件的css...三.查询元素设置超时时间 上面提到了，当缺少元素时，Cypress并不会立马返回失败而是继续重试，那么我们如何设置查找元素的超时时间呢？
最好、最方便的方法是使用跨浏览器检查工具。 如果你正在寻找解决方案，可以看看下面这些可靠且全面的跨浏览器检查工具。 这些工具提供了不同的功能，并满足了检查网站兼容性方面的需求。...它会生成屏幕截图，显示你的网站在不同浏览器中的渲染表现，唯一的缺点是需要在线使用该工具。...例如，你可以测试网站在 Windows、Linux、macOS 上的不同浏览器（Firefox 或 Chrome）中的表现。 它还提供了一个集成调试工具、地理位置工具，可以用来测试本地站点。...它提供了简单易用的 API，可用它检查某个元素是否包含了特定的文本或是否可见，甚至是可以用来测试 CSS 类、CSS ID 和属性。...Cypress 地址： https://www.cypress.io Cypress 是一个端到端测试套件，可用来测试和调试现代 Web 应用程序。 它在执行测试的同时还能记录下每一个测试的状态。
最近接触了一款开箱即用的端到端测试工具——Cypress，真心不错，Cypress可以对在浏览器中运行的任何东西进行快速、简单和可靠的测试。...2.现在我们开始写第一个自动化示例程序： 官方文档： https://docs.cypress.io/guidesdocs.cypress.io 先说一下cypress的目录结构。...cypress共有七个目录，还有一个cypress.json文件 ?...编写测试case 脚本实现功能： 1.输入访问地址 2.获取元素 3.输入账号密码 4.登陆 5.断言 在 integration 目录下新建你的工程目录，如demo，下面拿login.js文件为实例...describe 声明一个测试用例集 beforeEach 测试用例前置操作，相当于setup it声明了一个测试用例 cy.get 定位元素，用css selector定位选择器 should 断言控件含有内容
元素定位可以说是UI自动化测试的基础，没有元素定位，UI自动化就无从谈起。一般来说，一个好的定位器应该有如下4个属性： 1. 准确性。Locator应该准确找到你需要的元素。 2. 唯一性。...一旦你的页面元素发生变化，你的Locator多大程度上不用改动？ CSS还是XPath？ 无论你用哪个自动化测试工具，定位的方式无非就是CSS或者XPath。...HTML元素的属性（例如类， 字体颜色等） value： 是你想要匹配的特定值 关于这两种定位方式，网上一度有很多讨论和对比，但其实没那么玄乎，其差别就以下两点： 1....Cypress定位 VS Selenium定位 看过我Cypress书的同学都应该明白，Cypress里推荐的元素定位顺序如下： 1. data-cy 2. data-test 3. data-testid...尽量使用业务语义特征（举例来说，如果在淘宝上定位一个商品，商品的ID，名称、价格等是业务语义特征，而商品排在第几位，什么颜色展示等不是。） 4. 复杂元素定位先找锚点，锚点上还可以加Filter。
/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css"> 显示效果 在选项中添加关键字以提高其可搜索性data-tokens.... 勾选选择的选项 使用show-tick类在选项中加一个勾选标识 ... 宽度设置 select下拉框的宽度可以根据bootstrap网格父元素的宽度来定义 添加form-group和form-control属性定义form表单控件宽度 <div...将数据宽度设置为“自动”以自动将选择的宽度调整为最宽的选项。 ‘fit’会自动将select的宽度调整为当前所选选项的宽度。还可以指定精确值，例如300px或50％。
以第一个百度页面搜索框为案例编写一个可以运行的脚本 pycharm导入工程 上一篇新建的项目目录在D:\Cypress ?...在 integration 目录下新建你的工程目录，如demo，下面新建一个baidu.js文件 /** * Created by dell on 2020/5/11....代码解释： describe 声明一个测试用例集 beforeEach 测试用例前置操作，相当于setup it声明了一个测试用例 cy.get 定位元素，用css selector定位选择器 type...输入文本 should 断言，hava.value 是元素的value属性值，判断是否为‘yoyo’ clear 清空文本 should 继续断言，文本框内容为空字符串 运行脚本 接着上一篇的，先cd...2个断言都通过，一个简单的入门脚本就这样完成了！
健壮、可靠的元素定位策略可以保障测试成功率的提高 相对于其他测试框架来说，Cypress 提供了特别的定位策略，让你无须过多担心因定位失败而导致的测试失败 做元素定位时，你是否曾遇到过以下难题 元素...ID 或 class 是动态生成的 你使用了 CSS选择器去定位，但开发把元素CSS样式改掉了 这种情况下通常会测试失败 Cypress 如何解决上述难题 提供了 data-* 属性，包含了下面三个定位器...data-cy data-test data-testid 重点 它们都是 Cypress 专有的定位器，仅用来测试 属性和元素的行为或样式无关，意味着即使 CSS 样式或 JS 行为改变，也不会导致测试失败...data-* 注意：在实际项目中，需要自己将 属性加到元素中，意味着你得有权限修改代码 data-* html 前端代码 ?...常规选择器 会点前端的童鞋应该都知道，在 css 里面怎么写， 这里就怎么写，敲简单 的啦 #id 选择器 通过元素的 id 属性来定位 cy.get("#main1").click() .class
调试 Cypress提供了调试工具来帮你理解一个测试,能够做下面事情的能力: 适时的追溯每一个命令的快照. 查看发生的特殊的页面事件. 接收关于每个命令的额外输出. 在多个命令间向前/后移动....将命令暂停并且反复的单步调试它们. 当发现隐藏的或者多个元素的时候可视化它们. 让我们使用现有的测试代码看看其中的一些实际操作....时间旅行 将鼠标悬停在命令日志中的 GET 命令上,会看到右边定位到的元素位置 ? Cypress自动回溯到该命令解析之时的快照....这给了我们机会去手动检查处于当时快照情况下的测试下的应用程序的DOM元素. 事件hitbox 因为.click()是一个动作命令, 这意味着我们还会在事件发生的坐标处看到一个红色的hitbox....我们甚至可以把返回的东西展开并且检查每一个单独的元素, 或者我们甚至可以点击它们, 并在元素面板里面检查它们!
Prettier 一个代码格式化程序，支持多种语言，能够与大多数编辑器集成。 官网：https://prettier.io/ ? Prettier 7. CSS Scan 让你与“检查元素”再见。...它能立即检查悬停的任何元素的 CSS，并且只需要单击一下即可复制其整个规则。 官网：https://getcssscan.com/ ? CSS Scan 8....Cypress 对浏览器中运行的所有内容进行快速、轻松和可靠的测试。 官网：https://www.cypress.io/ ? Cypress 10....Kontrast-WCAG 对比度检查器 能够在浏览器中实时快速检查和调整对比度，以满足 WCAG 2.1 的要求。...BEM Cheat Sheet 即使是最有经验的 CSS 开发人员，也不会总是立即找到正确的类名，这很快会使你感到绝望。
领取专属 10元无门槛券
手把手带您无忧上云
