无法使用 cypress 拖放到 iframe答案

【问题标题】：Unable to Drag and drop into iframe using cypress无法使用 cypress 拖放到 iframe
【发布时间】：2020-06-04 06:40:17
【问题描述】：

您好，我必须将框架外的组件拖放到 iframe 主体中（可拖动源）但它没有将我的组件拖到 iframe 可拖动源中

这是用于进入 iframe 的代码，它正在工作意味着它正在进入 iframe 并查找元素

const getIframeDocument = () => {
  return cy.get(".gjs-frame").its("0.contentDocument").should("exist");
};

const getIframeBody = () => {
  // get the document
  return (
    getIframeDocument()
      // automatically retries until body is loaded
      .its("body")
      .should("not.be.undefined")
      // wraps "body" DOM element to allow
      // chaining more Cypress commands, like ".find(...)"
      .then(cy.wrap)
  );
};

和像这样拖放到 iframe 中

getIframeBody().find("#wrapper").as("Target");
cy.get('[title="Url"]').drag("@Target");

这并没有给我任何错误这个拖动功能工作但同时拖放没有发生 drag and drop execution pic must see this

【问题讨论】：

标签： cypress

【解决方案1】：

您可以使用此代码执行此操作。您只需要根据您的网站更改选择器即可。

// 定义定位器。

drag_element = '.blockbuilder-content-tools .blockbuilder-content-tool:nth- 
child(6)';
drop_element = '#u_body #u_row_2';
text_indentation = '[aria-label="Align center"]';

new_box_text = '这是一个新的文本块。更改文本。'

// 获取iframe body，然后拖拽元素。

iframe_interaction(){
    let ifm = cy.get('iframe');
    ifm
       .should(iframe => expect(iframe.contents().find('body')))
       .then(iframe => cy.wrap(iframe.contents().find('body')))
       .within({}, $iframe => {
         cy.get(this.drag_element).drag(this.drop_element, { force: true })
         cy.contains(this.new_box_text).dblclick({force: true})
         cy.get(this.text_indentation).click()
  })
 Github Link: https://github.com/sardar-usman/Cypress--Drag-and-Drop

【讨论】：