如何在Cypress中执行Javascript命令

在Cypress中执行Javascript命令 JavascriptExecutor

如果你有Selenium背景，比如你使用过Selenium Java、Protractor等工具，那么你应该使用过 **executeScript** 命令来执行javascript命令。通常情况下，当你在通过内置的方法来模拟任何动作时，或者在它不工作的情况下，我们会使用它。此外，还有很多用途，比如说如果你想在浏览器上执行自定义的javascript方法，它将会很有用。

考虑到Cypress，这些种类的javascript命令在Cypress中不太需要。原因是它通常直接在浏览器中工作。不过，如果你有需要，Cypress还是提供了一种执行JavaScript的方法。

这篇文章解释了：

如何在Cypress中执行Javascript Click？
如何在Cypress中使用Javascript执行器
在Cypress中运行Javascript
如何在本地浏览器窗口中执行命令？

在本文例子的帮助下，你可以在Cypress中修改和执行Javascript动作，如MovetoElement、Scroll、MouseMove、ScrollIntoView、Hover、MouseHover任何点击动作、双击、聚焦等。

让我们考虑一个例子。在Selenium中，你写下面的代码来执行Javascript点击动作。

Java

//Selenium Code to Execute Javscript for Click Actions
WebElement element = driver.findElement(By.id("pHiOh"));
JavascriptExecutor executor = (JavascriptExecutor)driver;
executor.executeScript("arguments[0].click();", element);

如何在Cypress中执行Javascript点击动作？

考虑到上面的例子，我们可以在Cypress中进行类似的操作

方法1：通过获取本地HTML DOM元素在Cypress中执行Javascript

TypeScript

//Method1: Cypress way of executing javascript click
cy.get("pHiOh").then(($el)=>{
 $el.get(0).click(); //This is the navite HTML DOM element
})

通过上面的例子，Cypress给你提供了对本地HTML DOM元素的控制，你可以对其执行任何动作，这与Javascript的点击事件非常相似。

考虑到上述代码$el.get(0).click()，$el持有本地HTML DOM元素，你可以对其执行任何操作，如上例所示。

方法2：在Cypress中使用窗口对象执行Javascript

这种方法是Cypress让你控制整个窗口，你可以对其执行任何动作，让我们看看这个例子

Cypress cy.window() 命令可以直接访问浏览器窗口，一旦你有了这个对象，你就可以直接对浏览器窗口执行任何操作。

TypeScript

//Method 2: Cypress way of executing javascript click using window object
cy.window().then((win) => {
 win.eval('document.getElementById("login_submit").click()');
});

在上面的例子中，我们使用window.eval()函数来执行javascript。

如果你想在cypress中添加或删除任何HTML元素，你也可以这样做。

如何在Cypress中动态地改变HTML元素的文本？

TypeScript

cy.visit('https://www.google.com/');
cy.window().then((win) => { 
   win.document.getElementsByName('btnK')[1].value = "Ganesh" 
});

使用Cypress中的windows对象，你几乎可以做任何本地浏览器的操作。

如何在Cypress中动态添加一个HTML元素？

TypeScript

cy.visit('https://www.google.com/');
  var el = window.document.createElement('button');
  el.innerText = "GANESH APPENDED"
  cy.get('#SIvCob').then(($el) => {
   $el.get(0).appendChild(el);
  })

简而言之，我们可以在Cypress中执行所有的javascript操作，相当于在Selenium Java/C#或protractor中执行Javascript。

参考链接: