当前位置: 首页 > Web前端 > CSS

css选择器的使用_0

时间:2023-03-31 00:36:14 CSS

前言这周一直在写数据校验。前端单元测试时,有时v层没有渲染数据,这时需要手动渲染。it('shouldcreate',()=>//下面的断言保证组件初始化过程中不会出现异常expect(component).toBeTruthy();//模拟生产环境后台异步返回数据getTestScheduler().flush();//确保组件接收到模拟数据后,无异常重新渲染fixture.detectChanges();});从潘先生的博文中,我们可以了解到这句话的具体含义。但这还不够。我们终于确认了v层数据渲染与否是肉眼判断的,失去了单元测试的意义。为了进一步完善,我们还需要在单元测试中加入断言,断言当前v层已经成功渲染数据。如果css选择器断言当前v层的某个item已成功渲染数据,则必须先获取v层元素。在学习的教程中也有通过表元素和输入元素进行断言的示例。但我在这里得到的是div中的值。具体v层代码如下

{{subject.course?.name}}
我们想要断言subject.course.name的值。但它是一个没有特殊属性的普通div。这个时候就想借此机会学习一下CSS选择器。CSS选择器可以获取v-layer的各种形式的元素,介绍几种常用的。1、绝对定位constnameInput:HTMLInputElement=fixture.debugElement.query(By.css('html>body>div>div>form>input')).nativeElement;这种定位是通过一层一层的父子元素关系来找到某个元素,好处是可以准确找到某个元素。但是,一旦与v层相关的元素发生变化,这个也应该随之发生变化。二、相对定位理解绝对定位,相对定位简单易懂。constnameInput:HTMLInputElement=fixture.debugElement.query(By.css('div>table')).nativeElement;它将匹配某个div下的所有表格元素。3、属性定位属性定位可以分为id定位、class定位和(other)属性定位。我们在示例中使用的是属性定位。constnameInput:HTMLInputElement=fixture.debugElement.query(By.css('input[name="name"]')).nativeElement;期望(nameInput.value).toEqual(student.name);这里我们匹配一个input元素,这个input的name属性是name。详情可以阅读这篇文章:CSSSelector使用控制台获取CSS选择器我们也可以使用控制台打印元素的位置。找到这个元素,右键复制,有一个复制选择器选项,让我们看看打印了什么#root0>div:nth-child(1)>div.col-md-8找到元素位置,剩下的的断言非常简单易写。但是也遇到了一些问题。我首先使用的例子的代码constsubjectCourseNameDiv:HTMLDivElement=fixture.debugElement.query(By.css('#root0>div:nth-child(1)>div.col-md-8')).nativeElement;expect(subjectCourseNameDiv.value).toContain('科目名称');但是断言总是失败,说我断言的值是undefined。但是通过打印subjectCourseNameDiv得到的元素是没有问题的。这时候我想到了input和div的区别。我们的输入是我们得到的属性的值XXXX
是一个属性,另一个是里面的值。然后上网查了一下div选择器是怎么写的。它不应是subjectCourseNameDiv.value,而应是subjectCourseNameDiv.innerText。整体代码如下。fit('应该创建',()=>{expect(component).toBeTruthy();constsubjectCourseNameDiv:HTMLDivElement=fixture.debugElement.query(By.css('#root0>div:nth-child(1)>div.col-md-8')).nativeElement;expect(subjectCourseNameDiv.innerText).toBe('');getTestScheduler().flush();fixture.autoDetectChanges();expect(subjectCourseNameDiv.innerText).toContain('subject姓名');});再次运行单元测试,成功通过。很高兴提交代码。但事情并没有那么简单。我无法通过机器人测试。我整体跑了单元测试,结果在刚写的单元测试上报错,说没有找到对应的元素。我又单独跑了这个单元测试,测试通过了。..想了想,估计是因为整体单元测试的v层发生了变化,找不到元素。我们需要知道发生了什么变化。打印这个选择器。#root158>div的数字是158,应该代表测试的联系人数量。这样我们写的肯定是错的,这时候就可以使用相对定位了。删除#root0>.constsubjectCourseNameDiv:HTMLInputElement=fixture.debugElement.query(By.css('div:nth-child(1)>div.col-md-8')).nativeElement;单元测试通过。综上所述,css选择器让我感受到了html的客观化。原来刚开始学的时候,一直认为html跟后端语言的语法完全不一样。但其实本质是一样的。这应该就是为什么学习一种语言可以掌握所有语言的原因。