如何在Nightwatch测试用例中导入并使用CSS全局常量(@value)？

我明白你想在Nightwatch测试里复用全局CSS文件里的@value变量来验证组件样式，但直接用require()导入CSS文件肯定不行——因为Node.js默认不认识CSS语法，更别说解析CSS Modules的@value规则了。不过这个需求完全可以实现，下面给你几个可行的方案：

方案1：将CSS常量迁移到JS文件，实现跨文件共享 #

这是最稳妥的方式，避免重复维护常量：

• 新建一个constants.js文件，把你的高度常量定义在这：

  export const TopHeaderHeight = '80px';
  

• 在你的global-style.css里导入这个JS常量（需要CSS Modules或postcss-import等构建工具支持）：

  @value TopHeaderHeight from './constants.js';
  

• 然后在Nightwatch测试里直接导入这个JS文件：

  import { TopHeaderHeight } from './constants.js';
  // 或者用CommonJS语法
  const { TopHeaderHeight } = require('./constants.js');
  
  // 之后就可以用这个值来断言样式了
  browser.expect.element('#top-header').to.have.css('height').equals(TopHeaderHeight);
  

方案2：用PostCSS解析CSS文件提取@value #

如果不想迁移常量，可以用PostCSS来解析你的CSS文件，提取出@value变量：

1. 安装必要依赖：

   npm install postcss postcss-modules-values --save-dev
   

2. 写一个小脚本（比如parse-css-values.js）来解析CSS文件：

   const fs = require('fs');
   const postcss = require('postcss');
   const values = require('postcss-modules-values');
   
   function getCssValues(cssPath) {
     const cssContent = fs.readFileSync(cssPath, 'utf8');
     return postcss([values])
       .process(cssContent, { from: cssPath })
       .then(result => {
         const cssValues = {};
         // 遍历所有@value规则提取变量
         result.root.walkAtRules('value', rule => {
           const [varName, , varValue] = rule.params.split(' ');
           cssValues[varName] = varValue;
         });
         return cssValues;
       });
   }
   
   module.exports = getCssValues;
   

3. 在Nightwatch测试里调用这个脚本：

   const getCssValues = require('./parse-css-values.js');
   
   module.exports = {
     '验证顶部导航高度': async function(browser) {
       const styles = await getCssValues('./global-style.css');
       browser.expect.element('#top-header').to.have.css('height').equals(styles.TopHeaderHeight);
     }
   };
   

方案3：直接在浏览器中获取计算后的样式（无需导入CSS文件） #

如果你的组件已经渲染到页面上，其实可以直接在测试里获取元素的计算样式，不用提前导入变量：

module.exports = {
  '验证顶部导航高度': function(browser) {
    browser
      .url('你的页面URL')
      .execute(function() {
        // 在浏览器上下文里获取元素的计算高度
        return window.getComputedStyle(document.getElementById('top-header')).height;
      }, [], function(result) {
        // 断言获取到的高度等于预期值
        this.assert.equal(result.value, '80px');
      })
      .end();
  }
};

内容的提问来源于stack exchange，提问作者Abhi