如何确认弹出框是否显示在鼠标悬停在元素上以及如何使用量角器获取显示的弹出框的内部文本

Question

我的量角器代码

var meover = element(by.xpath('/html/body/div[2]/div[1]/div[2]/span[1]/code'));

meover.getText().then(console.log);

browser.actions().mouseMove(meover).perform();

browser.sleep(2000);

如何获取弹窗文字？？查看图片以便更好地理解

图片

Answer 1

你为什么要用量角器做那个？您可以只创建一个指令 [popover] 或一个组件来执行此操作示例：

.ts 文件：

import {Component, Input} from "@angular/core";

@Component({
    selector: "popover",
    templateUrl: "popover.component.html"
})
export class PopoverComponent {
    @Input() title: string;
    @Input() content: string;
}

.html 文件：

 <ng-content></ng-content>
<div class="popover">
    <div class='header'>{{ title }}</div>
    <div class='content'>{{ content }}</div>
</div>

css 示例：

popover {
    position: relative;
    display: inline-block;
}

.popover {
    display: none;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(50%) translateY(100%);
    width: 300px;
}

popover:hover > .popover {
    display: block;
}

我没有测试过，但它应该看起来像我的例子。

要使用它，您需要将其写入 HTML 文件：

Hint : place the mouse over <popover [title]="my title" [content]="text displayed on hover">me</popover> !

Answer 2

var meover = element(by.xpath('/html/body/div[2]/div[1]/div[2]/span[1]/code'));
var toolbox = 'selector here';
browser.actions().mouseMove(meover).perform().then(() => {
    toolbox.getText().then((text) => {
        console.log(text);
    });
});

Answer 3

找到解决方案：

.........
.........
browser.actions().mouseMove(element(by.css('code.nocode.code-annotation'))).perform();
expect(element(by.css('.popover')).isDisplayed()).toBe(true);
popOver = element(by.css('.popover'));
popOver.getAttribute('title').then(console.log);
popOver.getAttribute('content').then(console.log);

如何确认弹出框是否显示在鼠标悬停在元素上以及如何使用量角器获取显示的弹出框的内部文本

How to confirm if a popover is displayed on mouse over a element and how to get the inside text of the displayed popover using protractor

angular

protractor

popover

mousehover