css选择器的使用

时间:2020-8-23 作者:admin

前言

这周一直在写数据校验,前台单元测试的时候,有时候v层没有渲染出数据,这时就需要手动让他渲染。

it('should create', () => 
    // 如下断言保障了组件在初始化的过程中未发生异常
    expect(component).toBeTruthy();

    // 模拟生产环境后台异步返回数据 
    getTestScheduler().flush();

    // 保障接收模拟数据后,组件重新渲染未发生异常
    fixture.detectChanges();
});

我们可以从潘老师的博客中明白语句的具体含义。但是这还是不够,我们最终确认v层数据渲染了与否还是通过我们肉眼判断的,这就失去了单元测试的意义。为了进一步完善,我们还需要在单元测试中加入断言,断言当前v层成功渲染了数据。

css选择器

要断言当前v层的某一项成功渲染了数据,首先要获取这个v层元素。学习的教程中也有通过table元素和input元素断言的实例。但是我这里获取的是一个div里的值。具体v层代码如下

<div class="row">
  <div class="col-md-2 text-right">
    <label>科目</label>
  </div>
  <div class="col-md-8">
    {{subject.course?.name}}
  </div>
</div>

css选择器的使用

我们想要断言subject.course.name的值。但是这是一个普通的div,没有什么特殊的属性。这时我就想趁此机会了解一下css选择器。
css选择器可以通过多种形式来获取一个v层的元素,介绍几种常用的。
一、绝对定位

const nameInput: HTMLInputElement = fixture.debugElement.query(By.css('"html >  
body > div > div > form > input')).nativeElement;

这种定位就是通过一层一层的父子元素关系来找到某一元素,优点是可以准确地找到某一元素。但是,一旦v层相关的元素改变,这里也要跟着变。

二、相对定位
理解了绝对定位,相对定位也就好理解了。

const nameInput: HTMLInputElement = fixture.debugElement.query(By.css('" div > table')).nativeElement;

他会匹配所有在某个div下的table元素。

三、属性定位

属性定位又可以分为id定位,class定位和(其他)属性定位。我们在实例中用的就是属性定位。

const nameInput: HTMLInputElement = fixture.debugElement.query(By.css('input[name="name"]')).nativeElement;

expect(nameInput.value).toEqual(student.name);

这里我们就是在匹配一个input元素,且此input的name属性为name。
具体可以看这篇文章:CSS 选择器

使用控制台获得css选择器

我们也可以使用控制台打印某一元素的位置。

css选择器的使用


找到这个元素,右键copy,有copy selector选项,让我们看看打印出来了什么

#root0 > div:nth-child(1) > div.col-md-8

找到了元素位置,剩下的断言就很好写了。
但是也遇到了点问题。

我先用的实例的代码

const subjectCourseNameDiv: HTMLDivElement = fixture.debugElement.query(By.css('#root0 > div:nth-child(1) > div.col-md-8')).nativeElement;

expect(subjectCourseNameDiv.value).toContain('科目名称');

但是断言总是过不去,说我断言的值为undefined。但是对subjectCourseNameDiv进行打印获取到的元素也没有问题。

这时我想到了input与div的不用,我们input是获取的属性的值比如要这样写

<input type="" name="" value="科目名称XXXX">

而div这么写

<div>科目名称XXXX</div>

一个是属性,一个是里面的值。然后去网上查一查div选择器的写法,不应该是subjectCourseNameDiv.value,而是subjectCourseNameDiv.innerText
整体代码如下。

fit('should create', () => {
    expect(component).toBeTruthy();

    const subjectCourseNameDiv: 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('科目名称');
  });

跑一遍单元测试,成功通过。高兴地提交代码。但是事情没有那么简单。

css选择器的使用


机器人测试过不去,我整体跑一遍单元测试,却在刚刚写的单元测试上报错,说没有找到对应元素。

css选择器的使用

我再单独跑这个单元测试,

css选择器的使用

测试通过。。。

思索一番后,猜测可能由于整体单元测试v层改变,导致找不到元素了。
我们要知道有什么变化。

css选择器的使用

打印一下这个的selector.

#root158 > div

这个数字是158,应该代表测试的接点数。这样我们写的肯定不对,这时我们可以使用相对定位。删除#root0 >.

const subjectCourseNameDiv: HTMLInputElement = fixture.debugElement.query(By.css('div:nth-child(1) > div.col-md-8')).nativeElement;

单元测试通过。

总结

css选择器让我感觉到了html的对象化。原来刚学的时候总以为html与后端语言语法完全不一样。但是其实本质是一样的。这应该就是为什么学一种语言而通全部吧。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。