是否可以检测 <img> 标记是否位于 html 文档中的正确位置？答案

【问题标题】：Is it possible to detect if an <img>-tag is positioned at the correct spot in an html document?是否可以检测 <img> 标记是否位于 html 文档中的正确位置？
【发布时间】：2019-07-26 05:15:12
【问题描述】：

我想知道是否可以检测<img>-tag 在 HTML 文档中的位置是否正确。我做了一些研究，但我只得到了关于如何在实际显示的网站上定位它的信息。我正在寻找的是 HTML 文档代码中的位置（在源代码中）。我想在 C# 单元测试中测试某个 <img>-tag 是否定位正确。

编辑：<img>-tag（还没有）没有特殊标识符，所以我必须在之前实现它，如果甚至可以根据 id 检测标签位置。

编辑 2：这是 HTML 文档的一般外观：

<div>
    <p class="MsoNormal"><span style='color:#1F497D;mso-fareast-language:DE'>disclaimer should be here<o:p></o:p></span></p>
</div>
<p class="MsoNormal"><span style='color:#1F497D'><o:p>&nbsp;</o:p></span></p>
<div>
    <div>
        <p>
            <span style="font-family: Calibri;">
                <span style="font-size: 8.5pt; font-family: Calibri;"><br>
                </span>
            </span>
        </p>
        <p>
            <span style="font-family: Calibri;">
                <span style="font-size: 11px;"><img src="cid:__Image_00000020" alt="" title="" width="499pxpx">
                </span>
            </span>
        </p>
    </div>
</div>

如果可能的话，我很想知道可以用什么来测试它。提前致谢！

【问题讨论】：

我不是在询问它在浏览器中的位置，而是在源代码中
我不需要知道任何东西是左还是右。我只想追踪标签位置，正如您在我发布的代码中看到的那样。我只想检查图像是否添加到您可以阅读字符串“disclaimer should be here”的位置
您可以像使用XML 一样使用HTML（或借助HAP 等第三方库）并检查特定XPath 上是否有节点
快速浏览后看起来很有希望。我会更深入地挖掘
所以在使用HAP 几天后，我编写了一些代码，返回到请求的disclaimer tag 的路径。如何检查它是否在 html 源代码中正确定位的唯一方法是创建模板并检查返回的路径是否与任何模板 <img> 路径匹配，对吗？ @vasily.sib

标签： c# html tags vs-unit-testing-framework

【解决方案1】：

所以我解决问题的方法是检查<img>-tag 是否在<div class="WordSection1"> 内。如果不是这样，我继续检查<html> 的每个标签位置，并使用 DFS 算法列出这些位置。然后我继续，查找节点位置并比较它们的索引：

public static DisclaimerPosition GetPositioning(HtmlNode tag, HtmlNode disclaimer, HtmlNode wordSection)
{
    if (tag == null) throw new NullReferenceException("Tag is null");
    if (disclaimer == null) throw new NullReferenceException("Tag is null");
    if (wordSection == null) throw new NullReferenceException("Tag is null");
    if (IsDisclaimerInWordSection1(disclaimer)) return DisclaimerPosition.InWordSection;

    if (tag.Name == "img" || tag.Name == "div" || tag.Attributes.FirstOrDefault(attribute => attribute.Name == "class")?.Value == "WordSection1" || !tag.HasChildNodes)
    {
        throw new ArgumentException("Tag is invalid, it's value matches disclaimer or wordSection or it has no children");
    }

    var list = GetNodeWithChildren(tag);

    var disclaimerIndex = list.IndexOf(disclaimer);
    var wordSectionIndex = list.IndexOf(wordSection);
    if (disclaimerIndex == -1) throw new ArgumentException("Disclaimer is -1");
    if (wordSectionIndex == -1) throw new ArgumentException("WordSection is -1");

    list.ForEach(node => Console.WriteLine(node.Name + " " + node.Attributes.Where(attribute => attribute.Name == "class").Select(attribute => attribute.Value).FirstOrDefault()));

    return disclaimerIndex < wordSectionIndex ? DisclaimerPosition.AboveWordSection : DisclaimerPosition.UnderneathWordSection;
}

private static List<HtmlNode> GetNodeWithChildren(HtmlNode node)
{
    var nodes = new List<HtmlNode> { node };

    nodes.AddRange(node
            .ChildNodes
            .Where(child => child.NodeType != HtmlNodeType.Text)
            .SelectMany(GetNodeWithChildren)
            .ToList());

    return nodes;

}


public static bool IsDisclaimerInWordSection1(HtmlNode disclaimerTag)
{
    var tag = disclaimerTag;
    while (tag != null)
    {

        if (tag.Name == "div" &&
            tag.HasAttributes &&
            tag.Attributes.Any(tagAttribute => tagAttribute.Name == "class" && tagAttribute.Value == "WordSection1"))
        {
            return true;
        }

        tag = tag.ParentNode;
    }

    return false;
}

【讨论】：