The front end of test development-CSS cascading style sheet

陈琦
中文

CSS is the abbreviation of Cascading Style Sheets. It is used to describe how to display HTML elements on screen, paper or other media, including defining the layout, style, size, position and color of web pages and their elements.

The syntax of CSS is expressed as:
image.png

The following is a simple example of setting the background color of the body of the webpage, the color and alignment of the title (h1), and the font and size of the paragraph (p).

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

There are 3 ways to reference style sheets in web pages, namely:

  1. Use the link element in the head to import an external style sheet file.
<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
  1. Use the style element in the head of the web page to define the content of the style sheet.
<head>
<style>
  body {
    background-color: linen;
  }
  h1 {
    color: maroon;
    margin-left: 40px;
  } 
</style>
</head>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>
  1. Use the style attribute to directly add style content to the element.
<body>
  <h1 style="color:blue;text-align:center;">This is a heading</h1>
  <p style="color:red;">This is a paragraph.</p>
</body>

We can use different CSS selectors to style elements. In the following html, you can use #desc to select the div element with an id of desc, and use .btn to select all submit buttons that contain the class btn.

<head>
<style>
  #desc {
    background-color: blue;
  }
  .btn {
    font-size: 20px;
  } 
</style>
</head>
<body>
  <div id="desc">This is a desc</div>
  <button class="btn">提交</button>
</body>

In Selenium automated test scripts, CSS selectors are usually used to locate elements in a web page. Like the following code, find the button whose class is btn and click it.

driver.find_element_by_css_selector('.btn').click()

I suggest you read the CSS property manual and CSS selector manual to deepen your understanding of cascading style sheets. This part of the content does not need to be remembered by everyone, and it can be searched as a manual in the future automated testing work.

thematic catalog

阅读 627

资深敏捷测试顾问,开源软件作者。国内知名项目管理软件—禅道团队成员。

147 声望
3.3k 粉丝
0 条评论

资深敏捷测试顾问,开源软件作者。国内知名项目管理软件—禅道团队成员。

147 声望
3.3k 粉丝
文章目录
宣传栏