柏树结束的引导模式

Question

试图关闭模式时，它们不会关闭。

我有几种从不同元素调用的自举模式。要显示它们，我执行以下操作：

cy.get（'＃units_modal'）。click（click（）

，并且毫无问题地显示模式。

问题是关闭模态时。我想在hook 之后关闭中的对话框，当该的所有测试部分都完成时，我正在说：

describe('Checking vehicles.', function(){
    before(()=>{
        cy.get('#unitsCommandHeaderMenu').click()
        cy.get('#units_modal').should('be.visible')
    })

    after(()=>{
        cy.get('#units_modal')    
        .then(($dialog)=>{
            cy.wrap($dialog).find('button').find('span').contains("×").click()
        });
    })

    it('first test', ()=> {
        cy.log('first test')
    })
    it('second test', ()=> {
        cy.log('second test')
    })
})

从视觉工具中，当我将指针放在点击事件我看到关闭按钮正在正确选择，应该单击它，但模态不会关闭。

甚至尝试使用：关闭Cypress中的角度材料对话框

这是我的HTML代码。

<!-- buttons -->
<ul class="modal">
<li id="first" data-toggle="modal" data-target="#units_modal">
    <span>first</span>
</li>
<li id="second" data-toggle="modal" data-target="#second_modal">
    <span>second</span>
</li>
<li id="third" data-toggle="modal" data-target="#third_modal">
    <span>third</span>
</li>
</ul>


<!-- modals -->

<div class="modal fade" id="units_modal" tabindex="-1" role="dialog" aria-labelledby="firstModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <!-- header -->
        </div>
        <div class="modal-body toFill">
            <!-- body -->
        </div>
        <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-modal-update"><span class="modal-update-btn-spinner fa fa-refresh"></span><span class="modal-update-btn-text">Update</span></button>
                    <button type="button" class="btn btn-secondary btn-modal-add"><span class="fa fa-plus"></span><span class="modal-update-btn-text">Add</span></button>
                <button type="button" class="btn btn-secondary btn-modal-close" data-dismiss="modal">Close</button>
        </div>
        </div>
    </div>
</div>

<div class="modal fade" id="second_modal" tabindex="-1" role="dialog" aria-labelledby="secondModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
            <!-- header -->
            </div>
            <div class="modal-body toFill">
                <!-- body -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-modal-close" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="third_modal" tabindex="-1" role="dialog" aria-labelledby="thirdModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <!-- header -->
            </div>
            <div class="modal-body toFill">
                <!-- body -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-thirdary btn-modal-close" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Answer 1

我认为问题是他们在按钮上的“ X”不是您从键盘上获得的“ X”。

我在下面显示了这两个，因此您可以比较它们。

it('opens and closes the bootstrap modal', () => {
  cy.visit('https://getbootstrap.com/docs/4.0/components/modal/');

  cy.contains('Launch demo modal').click()

  cy.get('#exampleModalLive')  
    .should('be.visible')
    .find('.modal-header')
    .find('button[data-dismiss="modal"]')
    // .should('contain', 'x')             // ❌ fails  (char 120)
    .should('contain', '×')                // ✅ passes (char 215)
    .click()

  cy.get('#exampleModalLive')  
    .should('not.be.visible')
})

---

但是使差异的行似乎是

。

实际上，我只是检查了 - 您的“ x”正确，

如果您在测试中不仅有cy.log（），就不会发生问题。

---

可见性检查似乎使测试代码等待淡入淡出的动画完成（在顶部元素上，请参见class =“模态淡出show”）。