Locating Retrieved CSS Resources in Results

Document created by Chris Sommerstad Employee on Jul 22, 2017
Version 1Show Document
  • View in full screen mode

Whenever a page is set to “dynamically” retrieve resources, the CSS resources included in the main HTML Document will also be retrieved. Pages will dynamically process the referred URLs and CSS files in any CSS file referred to by the main HTML Document of a page.

Resource references within CSS can take a variety of forms. For example, style settings can exist as a separate CSS file and can be then linked or imported into an HTML page as follows:

<head>
  <title>My first styled page</title>
  <link rel="stylesheet" href="mystyle.css">
</head>
<head>
<title>my first styled page</title>
<style type="text/css">
  @import url("mystyle.css");
  @import url "mystyle1.css";
  @import "mystyle2.css";
</style>
</head>

 

 

References can also be embedded into an HTML page as follows:

<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3ad; 
    background:url(../i/corners/r_btmcorner.gif) no-repeat top right; }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

When the composition is played, retrieved CSS resources are listed in the Result Details > Events List tab like any other resources. To locate a retrieved resource, locate its parent in the Navigation Tree or Cover Flow.

For example, in the screenshot below, the CSS file returned from Track 1, Test [0] clip, Page 1 was Resource-07.css. Once the CSS file has been located, click the Events List tab as shown on the right.

With the resource selected and the Events List tab clicked, the Events List will show only events related to the selection. In the screenshot below, the response to the CSS message is shown along with the retrieval, if any. In this case, there were three additional resources extracted from the response.

If any of the extracted resources are also CSS files, as is the case with Resource-09.css above, then it is retrieved and any further resources are extracted from its response.

To determine if Resource-09.css had any additional resources, select it in the Navigation Tree as was done for Resource-07.css and inspect its response.

In the example on the right, the second CSS file, which was extracted from the first CSS file, also has an additional CSS file (Resource-23.css). The extraction process continues until no additional CSS files are referenced.

CloudTest retrieves all relevant resources and does not filter based on what is used in the HTML Document. In cases where the test will omit one or more resources, this should be done via the use of Include/Exclude filtering. For example, to exclude one of the resources that was included in the CSS file, Resource-17.jpg, from the Page above, configure an exclude filter that will capture all occurrences of the resource to exclude.

  • If the resource to exclude occurs only in a single test clip, configure the filter via the Clip Editor > Properties > Page Resource Settings node.
  • If the resource to exclude occurs across the composition, configure it in the Composition Editor > Properties > Composition (node) > Page Resource Settings tab.

Attachments

    Outcomes