工具提示
工具提示是网络元素，通常用于向用户提供其他说明，通常是当用户徘徊在另一个元素上时。他们看起来像这样：用户徘徊在按钮上，并出现工具提示。
所以，让我们创建一些工具提示测试：
1：在e2e/elements_manipulation下创建一个新的测试文件，例如，tooltips.cy.js。
2：在内部写下以下测试：
/// <reference types="Cypress" />
describe('Tooltips: Tooltips actions', () => {
beforeEach('Navigate to Tooltips page', () => {
cy.visit('/tool-tips');
});
it('Check button tooltip hover', () => {
//Perform hover over button element
cy.get('#toolTipButton').trigger('mouseover');
//Assert that tooltip is visible and contains expected text
cy.get('.tooltip-inner').should('be.visible').and('contain', 'You hovered over the Button');
});
it('Check input tooltip hover', () => {
//Perform hover over input element
cy.get('#toolTipTextField').trigger('mouseover');
//Assert that tooltip is visible and contains expected text
cy.get('.tooltip-inner').should('be.visible').and('contain', 'You hovered over the text field');
});
it('Check text tooltip hover', () => {
//Perform hover over text element
cy.contains('Contrary').trigger('mouseover');
//Assert that tooltip is visible and contains expected text
cy.get('.tooltip-inner').should('be.visible').and('contain', 'You hovered over the Contrary');
});
});
代码说明：
在每次测试之前，我们将首先通过工具提示导航到所需的测试页面：page
测试1（按钮工具提示）：
第10行：我们将获得按钮的ID，我们将使用Cypress trigger事件模拟MouseOver Action（Hover Action）
在上一步时，应出现工具提示。
第12行：我们正在获得工具提示定位器，我们声称它是可见的，并且包含正确的文本。
测试2（输入工具提示）：
第16行：我们将获得输入字段的ID，我们将使用柏树触发事件来模拟鼠标操作（Hover Action）
在上一步时，应出现工具提示。
第19行：我们正在获得一个工具提示定位器，我们声称它是可见的，并且包含正确的文本。
测试3（文本上的工具提示）：
第24行：我们将通过柏树获得文本元素，其中包含获取元素的方法，我们将使用柏树触发事件模拟鼠标vose（Hover Action）。
在上一步时，应出现工具提示。
第26行：我们正在获得一个工具提示定位器，我们声称它是可见的，并且包含正确的文本。
â·见¸了解有关trigger事件的更多信息：trigger
â·见程序更多地了解工具提示：tooltips
tip：尝试获取工具提示的元素（通过Chrome或其他浏览器中的开发人员工具检查工具提示元素），工具提示将消失，您将无法在该工具中看到工具提示dom。我关于如何找到工具提示元素选择器的建议是编写一个测试，该测试将执行悬停操作并显示工具提示，然后在调试器中的柏里CLI桌面应用程序内，尝试检查工具提示元素。 Cypress CLI冻结了浏览器的状态，因此该工具提示将保留在其位置，您将能够获得工具提示选择器/定位器。
警报
警报是在浏览器窗口中显示框的元素，通常包含一些选项。他们看起来像这样：
所以，让我们为警报编写一些测试以查看它们的作用。
1：在e2e/elements_manipulation下创建一个新的测试文件，并将其称为alerts.cy.js。
2：在内部写下以下测试：
/// <reference types="Cypress" />
describe('Alerts: Alerts actions', () => {
beforeEach('Navigate to Alerts page', () => {
cy.visit('/alerts');
});
it('Check alert confirmation', () => {
//Create a stub method on window confirm alert
const stub = cy.stub();
cy.on('window:confirm', stub);
//Click on alert confirm button and assert that alert is called with correct text
cy.get('#confirmButton').click().then(() => {
expect(stub.getCall(0)).to.be.calledWith('Do you confirm action?');
});
//Select ok in alert
cy.on('window:confirm', () => true);
//Assert that confirmation text is visible
cy.contains('You selected Ok').should('be.visible');
});
it('Check alert cancellation', () => {
//Create a stub method on window confirm alert
const stub = cy.stub();
cy.on('window:confirm', stub);
//Click on alert confirm button and assert that alert is called with correct text
cy.get('#confirmButton').click().then(() => {
expect(stub.getCall(0)).to.be.calledWith('Do you confirm action?');
});
//Select cancel in alert
cy.on('window:confirm', () => false);
//Assert that confirmation text is visible
cy.contains('You selected Cancel').should('be.visible');
});
});
代码说明：
在每次测试之前，我们将首先导航到我们所需的测试页面，并带有警报：page。我们将自动化一个具有两个选项的警报，以确认或取消。
测试1（检查用户是否可以在警报事件上确认操作）：
第10行：我们将首先创建一个存根。存根是一种修改函数并将其行为控制权限委托给您（程序员）的方式。通常，当功能具有副作用时，您试图控制它。在这种情况下，我们只能按OK/CANCAL按钮的元素，然后单击它，因为Cypress无法作为正常网络元素与它们交互。*
第11行：我们正在观察浏览器事件窗口：确认（警报框）并应用存根，因为我们想在发生时与之互动。
第13行：我们单击第三个按钮 - 在我们的应用中单击我，然后单击 - >
第14行：我们期望使用正确的警报文本调用我们的存根功能
第17行：我们在窗口上执行一个操作：确认并提供值，这与单击OK按钮的动作相等
第19行：我们声称在警报选择后，在我们的页面上显示了正确的确认文本
测试2（检查用户是否可以在警报事件上进行取消操作）：
第24行：我们将首先创建一个存根。
第25行：我们正在观察浏览器事件窗口：确认（警报框）和应用存根，因为我们想在发生时与之互动。
第27行：我们正在单击第三个按钮 - 在我们的应用中单击我，然后单击 - >
第28行：我们期望使用正确的警报文本调用我们的存根功能
第31行：我们在窗口上执行一个操作：确认并提供值 - false-等于单击“取消”按钮的动作
第33行：我们声称在警报选择后，在我们的页面上显示正确的取消文本
卡普拉斯以自己的方式处理警报。它执行自动接受警报消息，而无需要求用户接受显式。没有办法在内置的柏树中读取警报消息。但是有一种击中浏览器命令的方法 - window:alert或window:confirm您可以阅读警报窗口中的文本。
â·见¸了解有关警报的更多信息：alerts
帧
帧或iFrame是一个HTML元素，它在文档中加载了另一个HTML页面。从本质上讲，它将另一个网页放在父页面中。它们通常用于从第三方，广告，嵌入式视频，Web分析和交互式内容插入付款方式表。
您可以真正看到该元素是一个iframe，直到打开开发人员工具并检查DOM。如果是iFrame，DOM通常会这样显示：
所以，让我们为iframe编写一些测试，以查看它们的作用。
1：在e2e/elements_manipulation下创建一个新的测试文件，并称其为iframe.cy.js。
2：在内部写下以下测试：
/// <reference types="Cypress" />
describe('iFrames: iFrames actions', () => {
before('Navigate to iFrame page', () => {
cy.visit('/frames');
});
it('Check iFrame content', () => {
//Create function to return the iframe and assert that it is not empty
const getIframeBody = () => {
return cy
.get('#frame1')
.its('0.contentDocument.body')
.should('not.be.empty')
.then(cy.wrap);
};
//Assert that iframe is visible
getIframeBody().should('be.visible');
//Assert that iframe contains heading with correct text
getIframeBody().find('#sampleHeading').should('contain', 'This is a sample page');
});
});
代码说明：
在测试之前，我们将使用Iframes访问我们的测试页面：page
在此测试中，我们将获得第一个iframe，并断言它是可见的，并包含正确的文本。
第16行10行：我们正在创建一个新功能，该功能将返回其所有内容。我们正在获得一个iframe的ID，它的身体是，我们声称不是空的，我们正在将所有功能包装在例如getIframeBody中。
现在，我们拥有返回iframe的函数，我们可以调用它并找到iframe内部的元素。在我们的情况下，我们只有内部文字。
第18行：我们断言我们的iframe是可见的
第20行：由于我们只有一些文本，因此我们获得了文本的ID并断言它包含正确的文本。 *
电 *在现实生活中，iframe通常更为复杂，例如，它可以是一份信用卡付款表格，您需要填写信用卡详细信息才能支付东西。因此，如果您想自动化这种场景，您将再次创建与我们在这里完全相同的功能，并称其为iframe内部的所有输入元素，按钮等并与之进行交互。
â·见¸了解更多有关iframes的信息：iframes
家庭作业
1：如果您想到一些，请为上述元素编写更多方案（我们没有涵盖所有警报案例，因此您可以尝试写更多的情况）
）2：访问课程中提供的链接，了解和了解什么是工具提示，iframe，警报。练习如何找到工具提示选择器，如何获取iframe和与之交互，如何操纵警报。
不要忘记推动您今天在github-记得git命令上所做的一切吗？
git add .
git commit -am "add: tooltip, alert, iframe tests"
git push
在第9课！
中见Completed code for this lesson
如果您学到了新知识，请随时购买咖啡来支持我的工作。
