尝试为主题选择器编写量角器 e2e 测试答案

【问题标题】：Attempting to write protractor e2e test for theme selector尝试为主题选择器编写量角器 e2e 测试
【发布时间】：2017-07-21 13:18:48
【问题描述】：

我是 Protractor 的新手，发现这有点困难，我希望我能解释一下，如果您需要任何进一步的信息，请告诉我。

所以.. 我正在开发的应用程序的默认主题设置为黑色，然后您可以在导航栏中选择一个下拉菜单，让您可以选择不同的主题“白色”，我已经能够成功选择白色主题，但我想知道如果默认主题是白色或更改为白色，如何使用它，然后检查黑色主题是否仍在工作我如何编写 e2e 测试来反映这一点。

我应该提到，一旦选择了一个主题，它就会被缓存 1 年，因此除非更改，否则主题将保持不变。

我为选择 Light 主题而编写的代码

it('should select theme selector', () => {
         let top = element(by.css('cloudgate-theme-selector'));
         top.element(by.css('.dropdown-toggle')).click();
         element(by.cssContainingText('li a', 'Light')).click();
         browser.sleep(1000);
     });

提前感谢您的帮助。干杯，

【问题讨论】：

所以您可能想要检查从一个主题切换到另一个主题并验证是否显示了正确的主题？是你的场景吗？
是的，这正是我想要验证的，但不确定如何写出来！谢谢基尚

标签： javascript angularjs angular typescript protractor

【解决方案1】：

我们也有深色主题和浅色主题：您可能需要找到存储主题的值。

在我的项目中看到下面的 html 代码：

对于深色主题：

<body class="nsweb-theme-dark">
<nsw-app _nghost-ewh-1=""><toaster-container _ngcontent-ewh-1="" ng-reflect-toasterconfig="[object Object]">

对于浅色主题：

<body class="nsweb-theme-light">
<nsw-app _nghost-ewh-1=""><toaster-container _ngcontent-ewh-1="" ng-reflect-toasterconfig="[object Object]">

所以你可以只取主题数据（对我来说是类）可用的文本，即浅色/深色，然后通过以下方式验证它：

if (theme == dark)
  {
   expect(themecolor).toBe("nsweb-theme-dark")
  }
else 
  {
   expect(themecolor).toBe("nsweb-theme-light")
  }

希望你清楚。 :-)

【讨论】：

我的天啊，非常感谢 Kishan，你是一个传奇，这很有意义，我会应用它并让你知道。再次感谢你，我的朋友，你太棒了。