最近更新略疲,主要是业余时间多了几个变化。比如忙活自己的模拟赛车驾舱升级、还跟朋友筹备一个小程序项目、另外早上的时间留给背单词了。。。

上一章中讲到Page接口的get_element()get_elements()方法,其中有个必填参数就是选择器,而 minium 正是通过它来定位元素的。

对前端有过了解的童鞋,肯定对css选择器不陌生,CSS 选择器用于“查找”(或选取)要设置样式的 HTML 元素

但是在小程序中用的是特有的格式WXSS,WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式,说白了就是用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改

因为不是完全一样的东西,所以小程序中的 wxss 仅支持部分css选择器

下面逐个看下不同选择器的用法。

一、选择器介绍

1. 类选择器 .class

根据类名称选择元素,比如.navigator-text,就是选择所有拥有class="navigator-text"的组件。

class ComponentTest(minium.MiniTest):
def test_ui_op(self):
print(self.page.get_elements("view.kind-list-item", index=2))
self.page.get_element("view", inner_text="表单组件").click()
self.page.get_element(".navigator-text").click()

示例代码中最后一行,如果get_element()找到多个符合的,就返回第一个。

存在多个类的时候可以以点为间隔一直拼接下去,比如:

<view id="main" class="page-section page-section-gap" style="text-align: center;"></view>
view#main.page-section.page-section-gap

2. id选择器 #id

根据id选择元素,比如#form,就是选择拥有id="view"的组件。

class ComponentTest(minium.MiniTest):
def test_ui_op(self):
print(self.page.get_element("#view"))

打印一下,看结果。

3. 类型选择器

在每个元素中,都有自己的元素标签,标签名称tagName就可以用来作为类型的选择。

比如这里的image

class ComponentTest(minium.MiniTest):
def test_ui_op(self):
print(self.page.get_element("image"))

打印下结果:

4. 多个类型选择器

除了上述单个元素标签外,还可以同时选择多个标签。

比如这个页面,标签text有1个,标签button有2个,那么我可以使用get_elements()方法同时选择这3个:

class ComponentTest(minium.MiniTest):
def test_ui_op(self):
self.page.get_element("view", inner_text="基础内容").click()
self.page.get_element("view.navigator-text", inner_text="text").click()
print(self.page.get_elements("text,button"))

打印下结果,应该有3个元素。

5. ::after

关于::after,作用是在选择的组件后插入内容。

我在官方的demo中找到了一个使用的地方,参考css中的:after用法,content中是插入的内容,官方demo项目中这里是空格。

这里更多的应该还是前端中涉及到的用法,暂时没想到在UI自动化中用到这个选择器的作用,有懂的看官还望不吝赐教。

6. ::before

同上

7. 跨自定义组件的后代选择器

跨自定义组件的后代选择器,这里体现在2个点:

  • 自定义组件
  • 后代选择器

自定义组件,就是你自己定义的组件,像示例中出现的<view>这些都不是自定义的。

再者就是后代选择器,这里要注意的是,指定的父元素下的后代元素,什么意思?

custom-element1>>>.custom-element2>>>.the-descendant

在上述示例中,custom-element1标签就是爷爷,然后标签里class名叫custom-element2的就是父亲,最后在这个父亲的儿子中,选择class名叫the-descendant的元素。

或者再借用css中的使用举例:

<div>
<p>
<span> 把苹果咬哭 </span>
</p>
<span> 举栗子 </span>
</div> <style>
div>span{color:red;}
</style>

这里的css选择器div>span设置元素为红色,那么举栗子会变红。

8. 属性选择器

可以选择带有特定属性或属性值的元素。

class ComponentTest(minium.MiniTest):
def test_ui_op(self):
self.page.get_element("view", inner_text="表单组件").click()
self.page.get_element("view.navigator-text", inner_text="input").click()
print(self.page.get_elements("input[placeholder='将会获取焦点']"))

这里input[placeholder='将会获取焦点']就是利用了属性和值的方式来定位元素。

打印下结果。

9. xpath

选择器参数也可以之间传xpath语句,之前在web项目时候个人非常喜欢用xpath,很灵活。具体语法这里不展开了,可以自行搜索:xpath语法xpath轴

还是以上面的元素为例,用xpath可以这样定位:

class ComponentTest(minium.MiniTest):
def test_ui_op(self):
self.page.get_element("view", inner_text="表单组件").click()
self.page.get_element("view.navigator-text", inner_text="input").click()
print(self.page.get_element("//input[@placeholder='将会获取焦点']"))

这里的//input[@placeholder='将会获取焦点']就是xpath语法,利用tagName+属性值来定位。

打印下结果。

二、简单选择器的组合使用

在上面提到的选择器中,简单易用的当属:tagNameidclassName,通常我们可以组合起来使用。

<view id="main" class="page-section page-section-gap" style="text-align: center;"></view>

组合一起使用:

view#main.page-section.page-section-gap

另一种写法(注意2个类之间有个空格):

view[id='main'][class='page-section page-section-gap']

三、小结

目前来看,小程序中对于css选择器的支持还是不错的,常用的类型都可以支持,具体怎么写定位器就还是结合具体项目来了。

灵活、稳定、复用性,我觉得是最重要的。

刚看了下之前给官方提的2个issue,目前还没有回复。得,先去肝小程序开发了,回见了您!

【小程序自动化Minium】三、元素定位- WXSS 选择器的使用的更多相关文章

  1. 【小程序自动化Minium】二、元素定位-Page接口中的 get_element() 与 get_elements()

    UI自动化中的重要工作就是元素定位了,高效精准的定位方法可以让工作事半功倍. 在过去的一段web自动化经历中,使用的selenium库支持了多种定位方法,我们可以利用这些定位方法来做进一步封装,写出符 ...

  2. 【小程序自动化Minium】一、框架介绍和环境搭建

    微信小程序自动化测试系列分享 一.Minium 简介 minium 是微信团队为小程序专门开发的自动化框架,我们可以用它来做小程序的UI自动化测试,但是它的能力却不仅仅在于UI自动化. 正是得益于官方 ...

  3. 小程序UI自动化(一):appium小程序自动化尝试

    appium 进行 小程序自动化尝试: 由于工作中进行app自动化用的是appium,故首先尝试用appium进行小程序自动化,以美团小程序为例(python脚本实现) 一.配置基础信息 启动微信ap ...

  4. 小程序实践(三):九宫格实现及item跳转

    效果图: 实现效果图红色线包含部分的九宫格效果,并附带item点击时间. --------------------------------------------------------------- ...

  5. 微信小程序自动化,记录趟过的坑!

    项目思想:关键字+数据驱动混合测试 基于Android-微信小程序自动化的关键是:webview的切换 对于微信App来说如何从NATIVE切换到webview的过程 测试版本信息 1.微信版本:7. ...

  6. appium自动化测试之UIautomatorviewer元素定位

    appium自动化测试之UIautomatorviewer元素定位 标签(空格分隔): uiautomatorviewer元素定位 前面的章节,已经总结了怎么搭建环境,怎样成功启动一个APP了,这里具 ...

  7. 微信小程序开发:学习笔记[3]——WXSS样式

    微信小程序开发:学习笔记[3]——WXSS样式 快速开始 介绍 WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果. WXSS ...

  8. 微信小程序把玩(三十七)location API

    原文:微信小程序把玩(三十七)location API location API也就分这里分两种wx.getLocation(object)获取当前位置和wx.openLocation(object) ...

  9. 使用wepy开发微信小程序商城第三篇:购物车(布局篇)

    使用wepy开发微信小程序商城 第三篇:购物车(布局篇) 前两篇如下: 使用wepy开发微信小程序商城第一篇:项目初始化 使用wepy开发微信小程序商城第二篇:路由配置和页面结构 基于上两篇内容,开始 ...

随机推荐

  1. python 安装各种库的镜像

    让python pip使用国内镜像#国内源:#清华:https://pypi.tuna.tsinghua.edu.cn/simple 阿里云:https://mirrors.aliyun.com/py ...

  2. [AcWing 75] 和为S的两个数字

    点击查看代码 class Solution { public: vector<int> findNumbersWithSum(vector<int>& nums, in ...

  3. [ubuntu18.04 python3.6] 清华源 CondaHTTPError: HTTP 000 CONNECTION

    问题 嫌官网源安装jupyter notebook太慢,所以尝试修改为清华源,但每次在Solving environment的时候就报错如下: 解决方法,修改conda配置信息: vim ~/.con ...

  4. 基于.NetCore开发博客项目 StarBlog - (4) markdown博客批量导入

    系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...

  5. Linux操作系统基本知识

    1.Linux开发环境 2.GCC 2.1GCC工作流程 预处理:只运行 C 预编译器. 宏去掉了,注释没有了 汇编 编译 链接 2.2GCC常用参数选择 选项 解释 -ansi 只支持 ANSI 标 ...

  6. 浅析 Linux 中的零拷贝技术

    本文探讨Linux中 主要的几种零拷贝技术 以及零拷贝技术 适用的场景 .为了迅速建立起零拷贝的概念,我们拿一个常用的场景进行引入: 引文 在写一个服务端程序时(Web Server或者文件服务器), ...

  7. Blazor和Vue对比学习(基础1.4):事件和子传父

    Blazor和Vue的组件事件,都使用事件订阅者模式.相对于上一章的组件属性,需要多绕一个弯,无论Blazor还是Vue,都是入门的第一个难点.要突破这个难点,一是要熟悉事件订阅模式<其实不难& ...

  8. 记录一次用宝塔部署微信小程序Node.js后端接口代码的详细过程

    一直忙着写毕设,上一次写博客还是元旦,大半年过去了.... 后面会不断分享各种新项目的源码与技术.欢迎关注一起学习哈! 记录一次部署微信小程序Node.js后端接口代码的详细过程,使用宝塔来部署. 我 ...

  9. Volatile的学习

    首先先介绍三个性质 可见性 可见性代表主内存中变量更新,线程中可以及时获得最新的值. 下面例子证明了线程中可见性的问题 由于发现多次执行都要到主内存中取变量,所以会将变量缓存到线程的工作内存,这样当其 ...

  10. OpenStack 安装 Keystone

    OpenStack 安装 Keystone 本篇主要记录一下 如何安装 openstack的 第一个组件 keystone 认证授权组件 openstack 版本 我选的是queens 版本 1.Op ...